双击编辑el-table的单元格数据

(1) el-table刷新要求绑定el-table的key要发生变化才会刷新

(2) 单元格双击事件 cell-dblclick

(3) 往row里面添加一个属性来唯一标识某一行的数据，双击时使这特殊属性为true，输入框失去焦点时则设置特殊属性为false，并且输入框的显示与隐藏通过v-if与特殊属性绑定。

(4) 回车事件 @keyup.enter.native

javascript 复制代码

<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博客