element ui 高级表格带有编辑

Element UI 提供了一个高级的表格组件——ElTable，它可以支持丰富的功能，包括列排序、分页、搜索以及编辑。要让 ElTable 具备编辑功能，你可以使用 Element 的内置插件——ElEditableColumn 或者自定义事件来实现。

以下是基本步骤：

1. 引入必要的依赖：

   <script src="element-ui/lib/table/basic-table.js"></script>

2. 使用 `el-form` 和 `el-input` 组件作为单元格的内容，并设置表单的提交事件处理函数：

   <template>
     <el-table :data="tableData" @edit="handleEdit">
       <!-- 添加编辑列 -->
       <el-table-column type="editable" label="Name" prop="name" />
     </el-table>
   </template>

   <script>
   export default {
     methods: {
       handleEdit(row) {
         this.$refs.editFormEditRow.handleEdit(row);
         // 提交后记得清除编辑状态或保存更改
         this.tableData[row.index] = row;
       },
       // 编辑表单的提交函数（这里仅作示例）
       handleSave(formName, currentValue, oldValue) {
         // 更新数据库或存储层
       },
     },
     //...
   }
   </script>

这里`@edit="handleEdit"`监听编辑事件，`handleEdit`方法会传递当前被编辑的行对象给表单处理函数`$refs.editFormEditRow.handleEdit`。

3. 定义`el-form`和对应的输入控件：

   <template>
     <el-form :model="currentEditingRow" ref="editFormEditRow">
       <el-form-item label="Name">
         <el-input v-model="currentEditingRow.name" disabled></el-input>
       </el-form-item>
       <!-- ...其他字段... -->
     </el-form>
   </template>

4. 确保在表格渲染完成后，初始化编辑状态：

   mounted() {
     for (let i = 0; i < this.tableData.length; i++) {
       this.currentEditingRow = this.tableData[i];
     }
   }