(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>
