vue+iview翻页勾选记忆功能

快来打我* 2023-02-10 05:07 173阅读 0赞

![20200520113522860.gif][]

<Modal
                    v-model="win.choiceExpertWin"
                    :mask-closable="false"
                    width="1000"
                    title="选择专家">
                <div>
                    <Form :label-width="0" class="searchToolForm" style="height: 60px">
                        <Col span="3">
                        <FormItem><span>已选择{
       {selectNum}}人</span></FormItem>
                        </Col>
                        <Col span="3">
                        <Button @click="checkChoose()">确认选择</Button>
                        </Col>
                    </Form>
                    <Table :data="optTableList" :loading="loading.optLoading" :columns="optExpertColumns" stripe
                           border class="hisotytble disable-cls" ref="optTableList"
                           @on-select="handleSelectRow"
                           @on-select-cancel="handleCancelRow"
                           @on-selection-change="selectChange">
                        <div slot="loading">
                            <Spin fix>
                                <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                                <div class="loading-text">加载中，请稍候......</div>
                            </Spin>
                        </div>
                    </Table>
                    <div>
                        <div class="fypage">
                            <Page :total="optCount"
                                  show-total
                                  show-sizer
                                  placement="top"
                                  :page-size="optPageSize"
                                  :page-size-opts="[10, 20, 50]"
                                  :current="optPage"
                                  @on-page-size-change="changeOptPageSize"
                                  @on-change="changeOptPage">
                            </Page>
                        </div>
                    </div>
                </div>
                <div slot="footer"></div>
            </Modal>

optExpertColumns:[
                        {
                            type: 'selection',
                            width: 60,
                            align: 'center',
                            className: 'checkboxsty',
                        },
                        {
                            title: '专家姓名',
                            key: 'name',
                            ellipsis: true,
                            align:'center',
                            minWidth: 100,
                            className: 'box-pack-center',
                        },
                        {
                            title: '性别',
                            key: 'sex',
                            ellipsis: true,
                            align:'center',
                            minWidth: 60,
                            className: 'box-pack-center',
                            render: (h, params) => {
                                let tools = [];
                                if (params.row.sex === 0) {
                                    tools.push('女')
                                }else if (params.row.sex === 1) {
                                    tools.push('男')
                                }
                                return h('div', tools);
                            }
                        },
                        {
                            title: '身份证号码',
                            key: 'idCard',
                            ellipsis: true,
                            align:'center',
                            minWidth: 130,
                            className: 'box-pack-center',
                        },
                        {
                            title: '联系电话',
                            key: 'mobliePhone',
                            ellipsis: true,
                            align:'center',
                            minWidth: 100,
                            className: 'box-pack-center',
                        },
                        {
                            title: '专委会职务',
                            key: 'postName',
                            ellipsis: true,
                            align:'center',
                            minWidth: 130,
                            className: 'box-pack-center',
                        },
                        {
                            title: '工作单位',
                            key: 'placeOfWork',
                            ellipsis: true,
                            align:'center',
                            minWidth: 170,
                            className: 'box-pack-center',
                        },
                        {
                            title: '擅长领域',
                            key: 'specialSkill',
                            ellipsis: true,
                            align:'center',
                            minWidth: 130,
                            className: 'box-pack-center',
                        },
                    ],

//打开专家页面
                onChoiceExpert(){
                    const that = this;
                    that.selectNum = 0;//初始化选择人数
                    this.selectedIds = new Set();//初始化选择人数
                    that.optExpertRequest.name = '';//初始化专家名称
                    that.optExpertRequest.ids = [];//初始化列表查询条件
                    that.temporaryList = [];//初始化
    
                    //把已经选择的专家从列表排除
                    for(let i = 0 ; i < that.expertTableList.length;i++ ){
                        that.optExpertRequest.ids.push(that.expertTableList[i].expertId);
                    }
                    that.getOptExpert(1);
    
                    that.win.choiceExpertWin = true;//打开弹窗
                },
    
                //专家列表
                getOptExpert(page){
                    const that = this;
                    that.optPage = page;
    
                    that.optExpertRequest.pageNum = that.optPage;
                    that.optExpertRequest.pageSize = that.optPageSize;
                    window.axios.post('/testController/test/getExpertInfoList', that.optExpertRequest).then((res) => {
                        that.optTableList = res.data;
                        that.optCount = res.total;
                        that.$nextTick(() => {//确保当前页的数据先渲染完毕
                            that.setChecked();//给跨页丢失的选中行重新添加选中状态
                        });
                        that.loading.expertLoading = false;
                    }).catch((err) => {
                        that.loading.expertLoading = false;
                    });
                },
    
    
                //  选中某一行
                handleSelectRow (selection,row) {
                    const that = this;
                    this.selectedIds.add(row.id);
                    this.selectNum = this.selectedIds.size;
                },
                //  取消某一行
                handleCancelRow (selection,row) {
                    const that = this;
                    this.selectedIds.delete(row.id);
                    this.selectNum = this.selectedIds.size;
                },
                //  这个函数就放在你点击翻页的函数里就行了（需要注意要在table将数据渲染完毕后执行，否则报错），
                //  达到每次翻页加载时将以前选中的row勾选上的效果
                // 给跨页丢失的选中行重新添加选中状态
                setChecked () {
                    // 找到绑定的table的ref对应的dom，找到table的objData对象，objData保存的是当前页的数据
                    //objData是vue自带的对象，直接.出来就可以了
                    let objData = this.$refs.optTableList.objData;
                    for (let index in objData) {
                        if (this.selectedIds.has(objData[index].id)) {
                            objData[index]._isChecked = true;//_isChecked是vue自带属性
                            // this.$refs.optTableList.toggleSelect(index)
                        }
                    }
                },
                selectChange(selection){
                    //保存勾选过的数据，防止翻页后勾选过的数据消失
                    const that = this;
                    const tempList = that.$refs.optTableList.getSelection();
    
                    //去重
                    var flag;
                    for(let i = 0 ; i < tempList.length;i++ ){
                        flag = true;
                        for (var j in that.temporaryList){
                            if (tempList[i].id === that.temporaryList[j].expertId){
                                flag = false;
                                break;
                            }
                        }
                        if (flag){
                            tempList[i].type = 0;//默认为组员
                            tempList[i].expertId = tempList[i].id;
                            tempList[i].projectId = that.expertRequest.projectId;
                            tempList[i].id = "";
                            that.temporaryList.push(tempList[i]);
                            that.optExpertRequest.ids.push(tempList[i].id);
                        }
                    };
    
    
                    //把勾选过然后再取消勾选的数据删除
                    var index = [];//下标
                    for (var i in that.temporaryList){
                        var count = 0;//记数器
                        for(var j of that.selectedIds){//当temporaryList中的某一元素不等于selectedIds中所有元素时，记下下标
                            if(that.temporaryList[i].expertId !== j){//temporaryList的第i位不等于selectedIds的第j位时count+1
                                count = count+1;
                            }
                            if(count === that.selectedIds.size){//当temporaryList的第i位不等于selectedIds中所有的元素时,说明temporaryList的第i位不存在selectedIds中，故删去
                                index.push(parseInt(i));
                            }
                        }
                    };
                    if (index !== null && index.length > 0){
                        for(i in index){
                            that.optExpertRequest.ids.splice(index[i], 1);//删去多余的元素
                            that.temporaryList.splice(index[i], 1);//删去多余的元素
                        }
                    }
                },
                //选择专家
                checkChoose(){
                    const that = this;
                    that.expertTableList = that.expertTableList.concat(that.temporaryList);//把最后的值赋给显示的列表
                    that.win.choiceExpertWin = false;
                },
    
    
                changeOptPageSize(size) {
                    const that = this;
                    that.optPageSize = size;
                    that.getOptExpert(that.optPage);
                },
                changeOptPage(page) {
                    const that = this;
                    that.getOptExpert(page);
                },

[20200520113522860.gif]: https://img-blog.csdnimg.cn/20200520113522860.gif