el-table 的单元格编辑

`el-table` 是 Element UI 中的一个表格组件，它支持单元格的编辑功能，这使得用户可以直接在表格单元格内输入数据并实时更新。在 `el-table` 中启用单元格编辑通常涉及以下几个步骤：

1. **列定义**：在列配置中设置 `editable` 属性为 `true`，表示该列可以被编辑。例如：

   <el-table-column type="index" label="#" width="60" :editable="true"></el-table-column>

2. **事件处理**：当用户开始编辑单元格时，会触发 `cell-editing-start` 和 `cell-edited` 事件。你可以监听这些事件来控制编辑行为，并在 `cell-edited` 事件中获取编辑后的值。

3. **验证规则**：可以通过 `formatter` 或者提供一个回调函数，在用户提交修改前检查数据的有效性。如果验证失败，可以阻止表单提交或者提示错误信息。

4. **保存数据**：在编辑过程中，一般需要一个确认按钮或者自定义的方式来保存用户的更改。你可以通过 `row-key` 来关联行数据，然后在编辑完成时更新原始的数据源。

// 示例：监听 cell-edited 事件保存数据
table.$on('cell-edited', (row, column, value) => {
  // 更新原始数据
  data[row.index][column.property] = value;
});