可编辑的表格
表格 编辑
2023-06-13 09:13:28 时间
<template>
<div>
<el-button @click="test">test</el-button>
<el-table :data="tableData" :row-class-name = "tableRowClassName" @cell-click="cellClick" style="width: 100%">
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.date" @blur="handleInputBlur" v-if="scope.$index ===rowIndex && cellClickLabel == '日期'" clearable></el-input>
<span v-else>{{scope.row.date}}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.name" @blur="handleInputBlur" v-if="scope.$index ===rowIndex && cellClickLabel == '姓名'" clearable></el-input>
<span v-else>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column label="地址">
<template slot-scope="scope">
<span>{{scope.row.address}}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
数据
rowIndex:null,
cellClickLabel:"",
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
}
],
methods: {
test(){
console.log(this.tableData)
},
tableRowClassName({ row, rowIndex }) {
// 把每一行的索引放进row
row.index = rowIndex
},
// 添加明细原因 row 当前行 column 当前列
cellClick(row, column, cell, event) {
console.log("点击行")
this.rowIndex = row.index
this.cellClickLabel = column.label
},
//input框失去焦点事件
handleInputBlur(row, event, column){ //当 input 失去焦点 时,input 切换为 span,并且让下方 表格消失(注意,与点击表格事件的执行顺序)
console.log("失去焦点")
this.rowIndex = ""
this.cellClickLabel = ''
},
handleChange() {
console.log("change")
this.rowIndex = ""
this.cellClickLabel = ''
}
},
相关文章
- 电脑表格制作步骤word_php入门案例
- 通过模板生成Excel表格——XLSTransformer
- P1829 [国家集训队]Crash的数字表格 / JZPTAB
- Thinkphp6学习(14)+layui表格分页与搜索显示
- 五表权限_表格设置查看权限和编辑权限
- 使用gtExtra美化表格
- Word VBA技术:判断表格中的单元格是否为空
- 如何在安卓手机上编辑Excel表格?
- jQuery表格排序组件-tablesorter详解编程语言
- Oracle导入表格的实现方式(oracle导入表格)
- 编辑Linux下快速高效的表格编辑技巧(linux表格)
- SQL Server动态列:实现动态表格最佳方案(sqlserver动态列)
- MySQL如何找到表格中一列的最长值(mysql 一列最长)
- MySQL如何高效存储和管理一个表格的数据(mysql一个表格数据)
- 表格斜线
- 固定表格行列(expression)在IE下适用
- JavaScript动态操作表格实例(添加,删除行,列及单元格)
- JavaSwing中的表格(JTable)和树(JTree)组件使用实例