双击编辑el-table的单元格数据
(1) el-table刷新要求绑定el-table的key要发生变化才会刷新
(2) 单元格双击事件 cell-dblclick
(3) 往row里面添加一个属性来唯一标识某一行的数据，双击时使这特殊属性为true，输入框失去焦点时则设置特殊属性为false，并且输入框的显示与隐藏通过v-if与特殊属性绑定。
(4) 回车事件 @keyup.enter.native
<el-table border class="mt20" :data="data" style="width: 100%" row-key="id" :key="key" @cell-dblclick="dblclick"><el-table-column type="index" label="序号" width="50"><template slot-scope="scope"><span>{{ (search.page -1) * search.size + scope.$index+1 }}</span></template></el-table-column><el-table-column prop="id" label="ID" width="width"></el-table-column><el-table-column prop="name" label="名称" width="width"></el-table-column><el-table-column prop="lwkx" label="论文扩写" width="width"><template scope="scope"><div v-if="scope.row[scope.column.property+'Show']" class="input-box"><el-input size="small" @keyup.enter.native="handleInputlwkx(scope.row,scope.column)" v-model="scope.row.lwkx"></el-input></div><span v-else>{{scope.row.lwkx}}</span></template></el-table-column></el-table><script>
export default {
data() {return {key: "",dialogVisible: false,search: {page: 1,size: 20,},data: [],total: 0,};},
methods: {dblclick: function (row, column) {console.log(column.property);row[column.property + "Show"] = false;row[column.property + "Show"] = true;this.updateTable();},// 修改论文扩写handleInputlwkx(row, column) {row[column.property + "Show"] = true;//业务代码funcGroupUpdate(row).then((res) => {this.dialogVisible = false;this.$message.success(res.message);});},//更新表格updateTable() {this.key = Math.random();},
}
}
</script>双击编辑el-table的单元格_el-table 单元格-CSDN博客