最近在项目中遇到一个需求,表格需要实现跨页勾选,然后完成批量删除动作,然后就去饿了么官网瞅了半天,发现饿了么官方虽然没有直接教你怎么进行跨页勾选,但是实际上是提供了这个功能的,下面附上详细的实现过程
1、给table加上row-key属性
<el-table :data="tableData" style="width: 100%" row-key='id'>
</el-table>
官方api:
2、打开reserve-selection
<el-table :data="tableData" style="width: 100%" row-key='id'>
<el-table-column type="selection" reserve-selection width="55"> </el-table-column>
</el-table>
官方api:
3、监听selection-change事件
<el-table :data="tableData" style="width: 100%" row-key='id' @selection-change='handleSelectionChange'>
<el-table-column type="selection" reserve-selection width="55"> </el-table-column>
</el-table>
data() {
return {
multipleSelection: []
}
}
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
},
}
官方api:
此时 multipleSelection存的就是跨页的数据,接下来我们在第一页勾选2个数据,第二页勾选3个数据,打印multipleSelection,可以看到跨页勾选的数据都被保存起来了