elementUI可编辑table

Element UI是一个基于Vue.js的开源UI组件库，它提供了一系列易用且美观的表格组件，其中就包括了支持可编辑功能的el-table。Element UI的el-table组件允许用户对表格中的数据进行实时编辑，通常通过`row-key`属性标识每一行的数据，在表格列上设置`edit-render-field`或`render-header`方法，配合`@cell-edit-end`或`@row-context-menu`等事件，用户可以点击单元格或右键菜单开始编辑，并在完成后触发相应的回调函数，更新数据源。

例如，创建一个可编辑的表头可能如下：

<el-table :data="tableData" @cell-edit-end="handleEditEnd">
  <el-table-column type="index" label="#" width="60"></el-table-column>
  <el-table-column prop="name" label="姓名" :edit-render-field="renderName" />
  <!-- ... 其他列 ... -->
</el-table>

<script>
export default {
  methods: {
    renderName(h, { row, column, $index }) {
      return (
        <template slot-scope="{ editing }">
          <el-input v-model="row.name" :disabled="!editing" size="small"></el-input>
        </template>
      );
    },
    handleEditEnd({ row, column, cellOldValue, cellNewValue }) {
      // 更新数据操作
      this.tableData[row.index][column.property] = cellNewValue;
    }
  }
}
</script>

在这个例子中，`renderName`函数用于渲染编辑单元格的内容，当进入编辑状态时，显示一个输入框；`handleEditEnd`则处理编辑后的更新操作。