使用element UI如何批量删除表格

可以使用 Element UI 中的 el-table 组件，结合 el-table-column 组件的 selection 属性和 el-button 组件的 type 属性实现批量删除。

具体实现步骤如下：

1. 在 el-table-column 组件中设置 selection 属性为 true，表示开启多选框。

<el-table-column type="selection"></el-table-column>

2. 在 el-table 组件上设置 ref 属性，用于在代码中获取表格的实例。

<el-table ref="table"></el-table>

3. 在 el-button 组件上绑定一个事件处理函数，用于删除选中的行。

<el-button type="danger" @click="handleDelete">批量删除</el-button>

4. 在事件处理函数中获取选中的行，并使用 $refs.table 的 clearSelection 方法清空选中状态。

methods: {
  handleDelete() {
    const selectedRows = this.$refs.table.selection;
    // 进行删除操作
    // ...
    this.$refs.table.clearSelection();
  }
}

完整的示例代码如下：

<template>
  <div>
    <el-table :data="tableData" ref="table">
      <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>
    <el-button type="danger" @click="handleDelete">批量删除</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ]
    };
  },
  methods: {
    handleDelete() {
      const selectedRows = this.$refs.table.selection;
      // 进行删除操作
      // ...
      this.$refs.table.clearSelection();
    }
  }
};
</script>