element-ui可编辑的单元格

Element UI 提供了一个叫做 `el-table-column` 的组件，可以设置为可编辑的单元格，通常通过 `edit-render-field` 属性来实现。在 `<el-table>` 标签里，你可以配置一个自定义的编辑功能。例如，你可以创建一个编辑状态的字段，并提供一个确认和取消按钮来允许用户修改单元格的内容。

这是一个基本的例子：

<template>
  <el-table
    :data="tableData"
    :cell-editable="true"  <!-- 开启单元格可编辑 -->
  >
    <el-table-column
      prop="name"
      label="姓名"
      edit-render-field="renderEditField"  <!-- 使用自定义编辑函数 -->
    />
    <!-- ...其他列... -->
  </el-table>
</template>

<script>
export default {
  methods: {
    renderEditField(value) {
      return (
        <el-input v-model="value" placeholder="请输入"></el-input>
        <button @click="cancelEdit">取消</button>
        <button @click="confirmEdit">保存</button>
      );
    },
    confirmEdit(row, column, cellValue) {
      // 确认修改后的值，这里假设我们保存到了 `row` 对象的对应属性
      row.name = cellValue;
      // 可以触发表格数据的更新，如使用 `this.$refs.myTable.refreshData()` 或者在外部管理数据的状态
    },
    cancelEdit() {
      // 取消编辑，恢复原始值
    },
  },
  data() {
    return {
      tableData: [{ name: '张三' }]
    };
  }
};
</script>

在这个例子中，当单元格变为可编辑模式，用户可以在 `<el-input>` 中输入新的值，点击 "保存" 按钮则调用 `confirmEdit` 方法保存新值，点击 "取消" 则执行 `cancelEdit` 返回到原始值。