element ui 批量删除

您可以使用 Element UI 的 Table 组件中的批量删除功能来实现批量删除。具体步骤如下：

1. 在 Table 组件中添加一个多选列，通过 `selection-change` 事件监听选中项的变化，将选中的项存储在一个数组中。
2. 添加一个删除按钮，通过 `click` 事件触发删除操作，将选中的项的 ID 发送到后端进行删除。
3. 删除成功后，更新表格数据并清空选中项数组。

以下是示例代码：

<template>
  <div>
    <el-button type="danger" @click="handleDelete">批量删除</el-button>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18, address: '北京市' },
        { id: 2, name: '李四', age: 20, address: '上海市' },        { id: 3, name: '王五', age: 22, address: '广州市' },
      ],
      selection: [], // 存储选中项的数组
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    handleDelete() {
      const ids = this.selection.map(item => item.id); // 获取选中项的 ID
      // 发送删除请求，这里使用 axios 发送请求
      axios.post('/api/delete', { ids }).then(() => {
        // 删除成功后更新表格数据并清空选中项数组
        this.tableData = this.tableData.filter(item => !ids.includes(item.id));
        this.selection = [];
      });
    },
  },
};
</script>