elementUI中el-table多选表格数据删除后，再次删除时复选框依旧是选中状态

### ElementUI 表格组件中的多选框选中功能实现 在 ElementUI 的 `Table` 组件中，可以通过设置属性和事件来实现多选框的功能。以下是详细的说明： #### 属性配置 为了启用多选功能，需要将 `selection-type="multiple"` 或者通过列定义的方式引入一个多选列。具体来说，在 `el-table-column` 中指定 `type="selection"` 来创建一个多选列[^3]。 ```vue <template> <el-table :data="tableData" @selection-change="handleSelectionChange"> <!-- 多选列 --> <el-table-column type="selection" width="55"></el-table-column> <!-- 其他数据列 --> <el-table-column prop="name" label="Name" width="120"></el-table-column> <el-table-column prop="age" label="Age" width="80"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 25 }, { name: 'Doe', age: 30 } ], selectedRows: [] }; }, methods: { handleSelectionChange(selection) { this.selectedRows = selection; console.log('Selected Rows:', this.selectedRows); } } }; </script> ``` 上述代码片段展示了如何在 Vue.js 和 ElementUI 中使用 `el-table` 实现多选功能。其中的关键部分在于设置了 `type="selection"` 的 `<el-table-column>` 列以及监听了 `@selection-change` 事件用于捕获当前被选中的行列表[^3]。 #### 获取已选项 当用户点击表格中的复选框时，会触发 `selection-change` 事件，并传递一个数组参数表示目前所有的选中项。这些选中项可以存储到组件的状态变量中以便后续操作，比如批量删除或者导出所选记录等场景下非常有用[^4]。 #### 功能扩展 如果希望自定义全选逻辑或者其他交互行为，则可能还需要额外处理一些细节，例如绑定整个表头的全选状态同步更新子项的选择情况等等。这通常涉及到更复杂的业务需求分析和技术方案设计[^5]。