iview里table翻页使selection选中状态不变

“开启掘金成长之旅！这是我参与「掘金日新计划 · 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,大家根据自己的需求自行修改即可,具体内容我也是用最通俗易懂的方式来讲解了,有不清楚的,可以评论,大家一起讨论讨论。

最后,祝大家发大财~