iview框架table 跨页多选，全选实现

1.资料：iview官网 https://www.iviewui.com/
2.问题 由于iview的table并没有自带的分页功能，只能由Page组件实现分页。实现思想是每次分页就给table的data重新填充数据。但是做多选的时候，分页就会出现bug，选中之后跳转到其他页，再跳转回来，就发现以前选中的行，选中效果不见了。

3.思路

跨页选中：将每页选中的id保存下来，当翻到那一页的时候查询保存的ID数据，如果是选择过的，进行勾选操作，给数据设置

._checked = true属性即可完成选中状态

选中所有页：因为分页返回的数据只是当前页，没法做到保存所有ID，如果要对全选后的数据做操作的话得重新想办法处理，这里只能做到全选以后每页数据的样式是选中状态，即如果设置了全选所有页翻页的时候将当前页数据设置为选中状态

4.代码实现

以下是代码：

table 和 page 代码

  

          全选
          取消全选
          总计：{{total}}条 已勾选：{{selectedSum}}条
          
 

data 代码

 columns: [
            {
                type: 'selection',
                width: 60,
                title: '全选',
                align: 'center'
            },
            {
                title: '分类',
                key: 'clasname'
            },
            {
                title: '区县',
                key: 'county'
            },
            {
                title: '名称',
                key: 'name'
            },
            {
                title: '地址',
                    key: 'address'
            },
            {
                title: '来源',
                key: 'usource'
            },
            {
                title: '图层名称',
                key: 'usourcetable'
            },
            {
                title: '操作',
                key: 'action',
                width: 300,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.typeedit(params)
                                }
                            }
                        }, 'typeedit')
                       
                    ]);
                }
            }
          ],
        selectedIds: new Set(),//选中的合并项的id
        selectedSum: 0, //选中的总数量
        datalist: [],
        total: 0,

methods 代码

       handleSelectAllPage(status){
          this.importAll=status;
          this.$refs.selection.selectAll(status);
       },
        //全选取消全选当前页
       handleSelectAll(slection){
           // 取消全选 数组为空
            if(slection && slection.length === 0){
                //  若取消全选，删除保存在selectedIds里和当前table数据的id一致的数据，达到，当前页取消全选的效果
                // 当前页的table数据
                var data = this.$refs.selection.data;
                data.forEach((item)=>{
                    if(this.selectedIds.has(item.id)){
                        this.selectedIds.delete(item.id);
                    }
                })
            }else{
                slection.forEach((item)=>{
                    this.selectedIds.add(item.id);
                })
            }
           if(this.importAll){//所有页选中
               //同步
               this.selectedSum = this.total;
           }else {
               //同步
               this.selectedSum = this.selectedIds.size
           }
        },
        handleSelect(slection,row){
            this.selectedIds.add(row.id);
            this.selectedSum ++;
        },
        handleCancel(sleection,row){
            this.selectedIds.delete(row.id);
            this.selectedSum --;
        },
 //  这个函数就放在你点击翻页的函数里就行了（需要注意要在table将数据渲染完毕后执行，否则报错），
        //  达到每次翻页加载时将以前选中的row勾选上的效果
        //  给跨页丢失的选中行重新添加选中状态
        setChecked () {
            if(!this.$refs.selection || !this.$refs.selection.data ){
                return null;
            }
           // let objData = this.$refs.selection.data;
            let objData = this.datalist;//当前页数据
            if(this.importAll){//选中所有页面
               // this.$refs.selection.selectAll(true);
                for (let index in objData) {
                   objData[index]._checked = true
                }
            }else{//没有全部选中所有页面
                for (let index in objData) {
                    if (this.selectedIds.has(objData[index].id)) {
                        objData[index]._checked = true
                        console.log(index);
                    }
                }
            }

        },

5，效果