“开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 5天,点击查看活动详情”
今天要做一个table里多选并支持翻页,已选中的数据不会被清空
一、首先我们先写一个table,并加入selection,让这个表格支持多选,再加入选中和取消选中的方法
<template>
<div>
<Table border ref="selection" :columns="columns" :data="data" @on-select="handleSelectRow"
@on-select-cancel="handleCancelRow"></Table>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03',
simulatorId: 1111
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01',
simulatorId: 144
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02',
simulatorId: 222
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04',
simulatorId: 333
}
]
}
},
}
</script>
PS: 这里只是举例数据,具体的数据肯定很多并且支持翻页面的,我在这里就不写那些无用的数据了
二、然后我们声明一个数组selectedIds(这个自己在代码里声明哈,我就不多写了) ,在选中或者取消选中的时候,对这个数组进行插入和删除
handleSelectRow(row: any) {
this.selectedIds.push(row.simulatorId)
}
handleCancelRow(row: any) {
this.selectedIds.splice(row.simulatorId, 1)
}
PS:这里我只传了row,因为我只用到了row,但实际上,官网提供的是selection和row两个参数,大家需要自行处理下
三、在我们切换到下一页的时候,调用一个选中的simulatorId和数据列表的simulatorId匹配的方法
checkedData() {
this.data = this.data.map((v: any) => {
if (this.selectedIds.includes(v.simulatorId)) {
v._checked = true //新增_checked字段将数据置为选中状态
}
return v
})
以上就是iview里table翻页使selection选中状态不变的方法,我的举例只是最简单的一个demo,大家根据自己的需求自行修改即可,具体内容我也是用最通俗易懂的方式来讲解了,有不清楚的,可以评论,大家一起讨论讨论。
最后,祝大家发大财~