ElementUI表格的多选功能在翻页时保留之前页的选择

参考

element-ui的表格有多选框时翻页记住之前选择的数据
场景描述:
element-ui的table表格数据有提供多选框的功能,只要在表格列中多加一列就可以选择表格的数据。但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页的数据的选中状态就没有了。
解决办法:
element-ui提供了reserve-selection,它仅对 type=selection 的列有效,类型为 Boolean,为 true时会在数据更新之后记住之前选择的数据。(需要指定row-key)
代码如下:

<el-table

:data=“tableData”

:row-key=“getRowKey”

ref=“dataTable”

@selection-change=“handleSelectionChange”

border>

methods: {

// 指定一个key标识这一行的数据

getRowKey (row) { return row.id }, // val表示选中的表格行数据

handleSelectionChange (val) { console.log(val) },

}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值