iview表格分页和多选功能实现

iview表格分页和多选功能,昨天写这个逻辑的时候有些迷糊 ,后面才完善出来的一下实现代码:

1.打开弹窗:如果之前有勾选并确认,需要回显之前的勾选记录,然后显示弹窗。

  showSelectNumber() {

   this.checkedHandle('show');

   this.showSelectChannelNumber = true;

  },

2.回显逻辑:

checkedHandle(flag) {
            //显示弹窗,selectedChannelList为之前的已选择列表,如果是修改需要回显勾选
            if (flag == 'show') {
                !!this.selectedChannelList.length && (this.selectData = [ ...this.selectedChannelList ]);
            } else if (flag == 'change') {
                // 切换分页参数
            } else {
                //关闭窗口
            }
            // 设置默认勾选,channelNumberData为当前页的数据,selectData为显示弹窗时用于临时存储选择列表
    // 保证重开弹窗或切换分页时,正确回显,关闭窗口时当前页数据全部取消勾选
            this.channelNumberData.length &&
                this.channelNumberData.map((item) => {
                    if (this.selectData.length) {
                        this.selectData.map((item2) => {
                            if (item2.id === item.id) {
                                // item._checked = true;
                                this.$set(item, '_checked', true);
                            }
                        });
                    } else {
                        item._checked = false;
                    }
                });
        },

3.选中变化时

selectColumn(datas) {
            //选择去重并保留其他分页选择数据 如果原有选中数据当前页有选中,先过滤掉原有当前页的选中项,最后拼接当前页最新选中列表
            if (this.selectData.length) {
                this.selectData = this.selectData.filter((item) => {
                    return !this.channelNumberData.some((item2) => {
                        return item2.id == item.id;
                    });
                });
                this.selectData = [ ...this.selectData, ...datas ];
            } else {
                this.selectData = datas;
            }
        },

4.关闭弹窗逻辑

changeVisibleChannleNumber(status) {
    if (!status) {
        //关闭时清空临时表
        this.selectData = [];
        //清空搜索关键词
        this.ChannelNameFilter = '';
        //重置分页
        this.channelNumberDataOptions = {
            ...this.channelNumberDataOptions,
            pageNo: 1,
            pageSize: 20
        };
        //更新当前页列表数据
        this.getChannelNumberList();
    }
},

发表评论

电子邮件地址不会被公开。 必填项已用*标注