iview框架table 跨页多选实现

iview table做跨页多选

由于iview的table并没有自带的分页功能，只能由Page组件实现分页。实现思想是每次分页就给table的data重新填充数据。

但是做多选的时候，分页就会出现bug，选中之后跳转到其他页，再跳转回来，就发现以前选中的行，选中效果不见了。

找了很多方法，要么版本太老，要么无用。最终结合找到的资料加自己的一些想法，实现了跨页多选。以下是代码：

table 和 page 代码

<Table
        stripe
        border ref="selection"
        :columns="columns"
        :data="tableData"
        @on-select="handleSelect"
        @on-select-cancel="handleCancel"
        @on-select-all="handleSelectAll"
        @on-select-all-cancel="handleSelectAll"
></Table>
<Page :total="total" @on-change="changePage"></Page>

methods 代码

export default {
    data (){
        return {}
    },
    methods:{
        handleSelectAll(slection){
            //全选
            if(slection.length === 0){
                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);
                })
            }
            },
        handleSelect(slection,row){
            this.selectedIds.add(row.id);
        },
        handleCancel(sleection,row){
            this.selectedIds.delete(row.id);
        },
        changePage(pageIndex) {
            //分页逻辑 --- start
            var len = pageIndex * 10 < this.total ? pageIndex * 10 : this.total;
            this.tableData = [];
            for (var i = (pageIndex * 10 - 10); i < len; i++) {
                this.tableData.push(this.allData[i]);
            }
            //分页逻辑 --- end
            
            var _that = this;
            //做跨页多选，由于渲染时间的原因，使用setTimeout规避
            setTimeout(function(){
                //拿到当前table的所有行的引用，里面包含_isChecked属性
                var objData = _that.$refs.selection.$refs.tbody.objData;
                for(let key in objData){
                    if(_that.selectedIds.has(objData[key].id)){
                        objData[key]._isChecked = true;
                    }
                }
            },0)
        }
    }
}
   

参考资料

• iview官网 https://www.iviewui.com/