vue element el-table点击编辑单元格内容

在Vue中使用Element UI的el-table时，如果你想要点击编辑表格中的单元格内容，可以使用el-table-column的template或scoped-slot来自定义单元格的内容，包括添加编辑按钮和实现编辑逻辑。

以下是一个简单的例子，展示了如何在点击单元格后进入编辑模式：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template slot-scope="scope">
        <el-input
          v-if="scope.row.edit"
          v-model="scope.row.name"
          size="small"
          @blur="handleSave(scope.row)"
        ></el-input>
        <span v-else>{{ scope.row.name }}</span>
        <el-button
          @click="handleEdit(scope.row)"
          type="text"
          size="small"
          icon="el-icon-edit"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          edit: false
        },
        // ... 其他数据
      ]
    }
  },
  methods: {
    handleEdit(row) {
      row.edit = true;
      this.$set(this.tableData, this.tableData.indexOf(row), row);
    },
    handleSave(row) {
      row.edit = false;
    }
  }
}
</script>

在这个例子中，我们定义了一个带有编辑状态的tableData数组。在el-table-column中，我们使用v-if来判断是否处于编辑状态。如果是，则显示el-input组件让用户编辑；如果不是，则显示文本内容。编辑按钮触发handleEdit方法，将对应行的edit属性设置为true，进入编辑模式。编辑完成后，当el-input失去焦点(@blur)时，触发handleSave方法，保存更改，并退出编辑模式。