VUE删除表格中的数据

在 Vue 中删除表格中的数据通常需要以下步骤：

1. 定义数据源：定义一个数组作为表格的数据源，如 `dataList`。

2. 显示数据源：使用 `v-for` 指令将数据源中的数据渲染到表格中。

3. 添加删除按钮：在每一行数据的最后一列添加一个删除按钮。

4. 监听删除按钮的点击事件：使用 `@click` 监听每个删除按钮的点击事件。

5. 删除数据：在监听到删除按钮的点击事件后，从数据源中删除对应的数据。

6. 更新显示：从数据源中删除数据后，需要重新渲染表格以更新显示。

下面是一个简单的示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in dataList">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td><button @click="deleteItem(index)">删除</button></td>
    </tr>
  </tbody>
</table>

<script>
export default {
  data() {
    return {
      dataList: [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 },
        { name: '王五', age: 25 }
      ]
    }
  },
  methods: {
    deleteItem(index) {
      this.dataList.splice(index, 1); // 从数据源中删除对应的数据
    }
  }
}
</script>

在上面的示例中，我们定义了一个 `dataList` 数组作为数据源，在表格中显示了每个数据项的姓名和年龄，并在每个数据项的最后一列添加了一个删除按钮。在 `deleteItem` 方法中，我们使用 `splice` 方法从数据源中删除对应的数据，并随后自动更新显示。