vue批量删除表格数据

可以通过以下步骤实现Vue批量删除表格数据：

1. 首先，在Vue组件中定义一个数组来存储表格数据，例如：

data() {
  return {
    tableData: [
      { id: 1, name: 'John Doe', age: 25 },
      { id: 2, name: 'Jane Doe', age: 30 },
      { id: 3, name: 'Bob Smith', age: 40 },
      { id: 4, name: 'Alice Johnson', age: 35 }
    ],
    selectedRows: []
  }
}

其中，`tableData`数组存储表格数据，`selectedRows`数组用于存储选中的行数据。

2. 接下来，在表格中添加复选框列，用于选中要删除的行数据，例如：

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection"></el-table-column>
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>

在上面的代码中，`type="selection"`用于定义复选框列，`@selection-change`用于监听选中的行数据。

3. 然后，在Vue组件中定义一个方法来处理选中行数据的变化，例如：

methods: {
  handleSelectionChange(selection) {
    this.selectedRows = selection
  }
}

在上面的代码中，`selection`参数表示选中的行数据，将其赋值给`selectedRows`数组。

4. 最后，在Vue组件中定义一个方法来处理批量删除操作，例如：

methods: {
  handleDelete() {
    for (let i = 0; i < this.selectedRows.length; i++) {
      const index = this.tableData.indexOf(this.selectedRows[i])
      this.tableData.splice(index, 1)
    }
    this.selectedRows = []
  }
}

在上面的代码中，使用`indexOf`方法获取选中行数据在`tableData`数组中的索引，然后使用`splice`方法从数组中删除该行数据。最后，清空`selectedRows`数组。

5. 绑定删除按钮的点击事件，调用`handleDelete`方法，例如：

<el-button type="danger" @click="handleDelete">Delete</el-button>

至此，就完成了Vue批量删除表格数据的操作。