el-table怎么在取消多选框勾选时从已选择的数组中移除对象数组
时间: 2023-05-23 14:05:31 浏览: 266
vue+element获取el-table某行的下标,根据下标操作数组对象方式
A:可以监听 el-table 的 @selection-change 事件,然后在回调函数中对已选择的数组进行处理。可以使用数组的 filter 方法来过滤出未取消勾选的对象数组,如下所示:
```html
<template>
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection"></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-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 22, address: 'New York' },
{ id: 2, name: 'Mary', age: 30, address: 'Los Angeles' },
{ id: 3, name: 'Tom', age: 25, address: 'Chicago' }
],
selectedRows: [] // 初始化已选择的对象数组
}
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection.filter((row) => row.selected)
}
}
}
</script>
```
在上述代码中,通过一个名为 selectedRows 的数组来存储已选择的对象数组。在 @selection-change 事件的回调函数中,使用 filter 方法过滤出未取消勾选的对象数组,并将它们覆盖原来的 selectedRows 数组。通过这种方式,就可以动态地更新已选择的对象数组了。
阅读全文