vue 点击按钮删除表格行

在 Vue 中删除表格行的常用方法是通过删除数据源中的某个元素，然后重新渲染表格。下面是一个简单的示例：

1. 首先，在 Vue 实例中定义一个数据源，例如：

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

2. 在模板中使用 `v-for` 渲染表格，并为每一行添加一个删除按钮：

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

3. 实现 `removeRow` 方法，该方法接收一个索引参数，表示要删除的行的位置。在该方法中，先从数据源中删除对应的元素，然后重新渲染表格：

methods: {
  removeRow(index) {
    this.tableData.splice(index, 1);
  }
}

这样，当用户点击某一行的删除按钮时，就会调用 `removeRow` 方法，删除对应的行，并重新渲染表格。