vue+iview翻頁勾選記憶功能

 

<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',
                    },
                ],

            //專家列表
            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.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勾選上的效果
            // cy 給跨頁丟失的選中行重新添加選中狀態
            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.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);
                setTimeout(function(){//確保當前頁的數據先渲染完畢
                    that.$nextTick(() => {
                        that.setChecked();//給跨頁丟失的選中行重新添加選中狀態
                    });
                },500);
            },