el-table获取取消的选项
时间: 2023-11-25 10:47:11 浏览: 66
要获取取消的选项,可以使用element-ui表格组件的@selection-change事件。该事件会在用户选择或取消选择行时触发。在事件处理程序中,可以通过参数selection获取当前已选择的行,通过参数row获取当前操作的行。如果用户取消选择行,则该行将从selection数组中移除。因此,可以通过比较原始的selection数组和当前的selection数组来获取取消的选项。具体实现可以参考以下代码:
```
<template>
<el-table
:data="tableData"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2021-01-01',
name: '张三',
address: '北京市'
},
{
date: '2021-01-02',
name: '李四',
address: '上海市'
},
{
date: '2021-01-03',
name: '王五',
address: '广州市'
}
],
selectedRows: []
}
},
methods: {
handleSelectionChange(selection) {
const removedRows = this.selectedRows.filter(row => !selection.includes(row))
console.log('取消选择的行:', removedRows)
this.selectedRows = selection
}
}
}
</script>
```
阅读全文