el-table获得取消选中的数据
时间: 2023-10-18 07:28:31 浏览: 255
要获取 `el-table` 中被取消选中的数据,需要监听 `el-table` 的 `@selection-change` 事件,并结合 `el-table` 的 `selection` 属性和 `row-key` 属性进行处理。具体步骤如下:
1. 在 `el-table` 上添加 `@selection-change` 事件监听器,指向一个方法,例如 `handleSelectionChange`。
2. 在 `el-table` 上设置 `:row-key` 属性,指向一个唯一标识每行数据的属性,例如 `id`。
3. 在 `handleSelectionChange` 方法中,通过 `el-table` 的 `selection` 属性获取当前选中的数据,通过 `el-table` 的 `getSelection()` 方法获取被取消选中的数据。
4. 对比当前选中的数据和被取消选中的数据,找到被取消选中的数据,并进行相应的处理。
以下是一个示例代码:
```html
<template>
<el-table
:data="tableData"
:row-key="row => row.id"
@selection-change="handleSelectionChange"
ref="table"
style="width: 100%">
<el-table-column
prop="name"
label="Name">
</el-table-column>
<el-table-column
prop="age"
label="Age">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 28 },
{ id: 2, name: 'Jane', age: 24 },
{ id: 3, name: 'Bob', age: 35 }
],
selectedData: []
}
},
methods: {
handleSelectionChange(selection) {
// 获取被取消选中的数据
const deselectedData = this.selectedData.filter(data => !selection.includes(data));
// 处理被取消选中的数据
deselectedData.forEach(data => {
console.log(`取消选中的数据:${data.name}`);
});
// 更新当前选中的数据
this.selectedData = selection;
}
}
}
</script>
```
在这个示例代码中,我们定义了一个 `tableData` 数组作为 `el-table` 的数据源,同时定义了一个 `selectedData` 数组来存储当前选中的数据。在 `handleSelectionChange` 方法中,我们通过 `this.selectedData` 和 `selection` 数组的差集来获取被取消选中的数据,然后进行相应的处理。最后,我们更新 `this.selectedData` 为当前选中的数据。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)