2023Vue 中如何实现表格的编辑及取消？

Vue 中如何实现表格的编辑及取消？

在 Vue 开发中，经常需要处理表格的编辑、修改等操作，因此实现表格的编辑及取消就显得尤为重要。在此，本文将介绍 Vue 中如何实现表格的编辑及取消。

1. 表格数据的绑定

在表格中，我们首先需要将数据渲染到表格中，因此需要将数据进行绑定。在 Vue 中，可以通过使用 v-for 指令来实现数据的遍历和渲染。

例如，在 data 中定义一个示例数据，如下所示：

data() {
  return {
    tableData: [
      {name: '张三', age: 20},
      {name: '李四', age: 22},
      {name: '王五', age: 25},
    ],
    editIndex: -1,
  }
}

其中，定义了一个 tableData 数组，其中存储了三个对象，每个对象代表表格中的一行数据。editIndex 表示当前正在编辑的表格行，初始值为 -1，表示未编辑状态。

在表格中，可以使用如下代码渲染数据：

<table>
  <tr v-for="(item, index) in tableData" :key="index">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <td>
      <button @click="editRow(index)">编辑</button>
    </td>
  </tr>
</table>

在上述代码中，使用 v-for 指令循环遍历 tableData 数组中的数据，使用 :key 属性指定每个元素的唯一标识。同时，表格中的每一行都有一个“编辑”按钮，点击该按钮会将当前行置于编辑状态。

2. 表格编辑状态的切换

在 Vue 中，可以通过定义一个 editIndex 变量来记录当前正在编辑的行的索引。当用户点击“编辑”按钮时，将该按钮所在行的索引设置为 editIndex 的值，并将表格中该行的数据展示为可编辑状态。当用户点击“保存”或“取消”按钮时，将 editIndex 的值重置为 -1，表示当前没有行处于编辑状态。

在代码中，可以使用如下代码切换编辑状态：

methods: {
  // 编辑表格行
  editRow(index) {
    if (this.editIndex !== -1) {
      // 如果已经在编辑状态，则提示用户
      alert('请先完成当前行的编辑');
      return;
    }
    // 将该行的所以设置为编辑状态
    this.editIndex = index;
  },
  // 保存表格行
  saveRow() {
    // 执行保存操作
    // ...

    // 重置编辑状态
    this.editIndex = -1;
  },
  // 取消表格行
  cancelRow() {
    // 重置编辑状态
    this.editIndex = -1;
  }
}

在上述代码中，editRow 方法用于设置表格行的编辑状态，saveRow 方法用于保存表格编辑的结果，cancelRow 方法用于取消表格编辑操作。

3. 表格行的编辑

在表格中，当进入编辑状态时，需要将表格行的数据展示为可编辑状态。在 Vue 中，可以通过使用 input、select 等表单元素来实现该效果。

例如，在表格行中展示 name 和 age 两列数据时，可以使用如下代码：

<tr v-for="(item, index) in tableData" :key="index">
  <td>
    <input type="text" :value="editIndex === index ? item.name : item.name">
  </td>
  <td>
    <input type="text" :value="editIndex === index ? item.age : item.age">
  </td>
  <td>
    <button @click="editRow(index)">编辑</button>
    <button @click="saveRow()">保存</button>
    <button @click="cancelRow()">取消</button>
  </td>
</tr>

在上述代码中，使用 input 元素实现了 name 和 age 两列数据的可编辑状态。使用三个按钮切换表格编辑状态，其中“保存”按钮用于保存编辑结果，将数据存储到后台服务器中或更新本地状态中的数据。

总结

通过以上步骤，我们可以实现 Vue 中表格的编辑及取消。在实际开发中，可以根据需求自定义编辑功能，例如实现表格单元格的自定义编辑功能，增加表格数据的校验和提示等。