如何在 Element UI 管理模板中实现批量操作功能

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection"></el-table-column>
  <!-- 其他列 -->
</el-table>

<el-button @click="batchDelete">批量删除</el-button>

methods: {
  handleSelectionChange(selection) {
    this.selectedRows = selection;
  },
  batchDelete() {
    if (!this.selectedRows.length) {
      this.$message.warning('请至少选择一条数据');
      return;
    }

    this.$confirm('确定要删除选中的数据吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 调用删除接口或本地操作
      this.tableData = this.tableData.filter(
        item => !this.selectedRows.some(selected => selected.id === item.id)
      );
      this.selectedRows = [];
      this.$message.success('删除成功');
    }).catch(() => {
      // 用户点击取消
    });
  }
}

data() {
  return {
    selectedIds: new Set()
  };
},
methods: {
  handleSelectionChange(selection) {
    selection.forEach(item => this.selectedIds.add(item.id));
  },
  clearSelection() {
    this.selectedIds.clear();
  }
}