跨页多选逻辑

src/views/dataEntry_manage/thirdBase/bloombergSource.vue

@@ -6,12 +6,21 @@
                   <el-option label="日度" value="日度"></el-option>
                 </el-select>
                 <el-input v-model="keywordSelect" placeholder="指标ID/指标名称"></el-input>
-                <el-checkbox label="列表全选"></el-checkbox>
+                <el-checkbox 
+                    :indeterminate="isIndeterminate" 
+                    v-model="isCheckAll" 
+                    @change="listCheckAllChange">列表全选</el-checkbox>
             </div>
             <el-button type="primary">添加到指标库</el-button>
         </div>
         <div class="page-table">
-            <el-table :data="tableData" border>
+            <el-table :data="tableData" border
+                ref="edbDataRef"
+                @selection-change="selectionChange"
+                @select="selectHandle" 
+                @select-all="selectAllHandle"
+                @sort-change="handleSortChange"
+            >
                 <!-- 多选 -->
                 <el-table-column
                     align="center"
@@ -48,7 +57,7 @@ export default {
             frequenceSelect:'',
             keywordSelect:'',
             tableColumns:[
-                {key:'ID',label:'指标ID'},
+                {key:'EdbInfoId',label:'指标ID'},
                 {key:'name',label:'指标名称'},
                 {key:'frequence',label:'频度'},
                 {key:'startDate',label:'指标开始时间',sortable:true},
@@ -57,25 +66,179 @@ export default {
             ],
             tableData:[
                 {
-                    'ID':'aa',
+                    'EdbInfoId':12345,
                     'name':'指标名称aa',
                     'frequence':'日度',
                     'startDate':'2022-01-01',
                     'endDate':'2024-04-10',
                     'updateDate':'2024-04-10 02:00:00'
+                },
+                {
+                    'EdbInfoId':54321,
+                    'name':'指标名称bb',
+                    'frequence':'日度',
+                    'startDate':'2022-01-01',
+                    'endDate':'2024-04-10',
+                    'updateDate':'2024-04-10 02:00:00'
                 }
             ],
             currentPage:1,
             pageSize:10,
-            total:0,
+            total:2,
+
+            isIndeterminate:false,
+            isCheckAll:false,//与isIndeterminate一起表示列表全选的状态
+            isSelectAll:false,//是否勾选了列表全选:为true时，selectList是剔除的指标，为false时selectList是已选择的指标
+            selectList:[],//已选择/已剔除的指标id
+            selectionReactCancel:false,//select-事件触发时,为true;该事件触发完成后,为false;
+
 
         };
     },
     methods: {
+        getTableData(type){
+            if(type==='optionChange'){
+                //如果是表格筛选项改变导致重新请求数据
+                //数据获取完成后，列表全选，表格全选
+                this.selectList = []
+                this.listCheckAllChange(true)
+            }else{
+                //若不是，数据获取完成后，查询列表全选的值
+                //若当页有数据在selectList内，则勾选/剔除
+                this.adjustSelection()
+            }
+        },
         handleCurrentChange(page){
             this.currentPage = page
+            this.getTableData()
+        },
+        handleSortChange({prop,order}){
+            if(order){
+                this.selectOption.sortParam = 'end_date'
+                this.selectOption.sortType = order==='ascending'?'asc':'desc'
+            }else{
+                this.selectOption.sortParam = ''
+                this.selectOption.sortType = ''
+            }
+            this.selectOptionChange()
+        },
+        //表格筛选项改变时触发
+        selectOptionChange(type){
+            this.currentPage = 1
+            this.getTableData('optionChange')
+        },
+        //列表全选改变
+        listCheckAllChange(value){
+            this.selectList = []
+            this.isSelectAll = value
+            this.$refs.edbDataRef && this.$refs.edbDataRef.clearSelection()
+            if(value){
+                this.$refs.edbDataRef && this.$refs.edbDataRef.toggleAllSelection()
+            }
+        },
+        selectionChange(){
+            if(this.selectionReactCancel) return 
+            // selectAllHandle的触发在selectionChange后面，将selectionChange的逻辑延迟一下
+            setTimeout(()=>{
+                // 去重
+                let duplicateArr = Array.from(new Set(this.selectList))
+                //isSelectAll为true时，selectList表示需要剔除的项
+                //isSelectAll为false时，selectList表示需要勾选的项
+                //全选
+                if((duplicateArr.length == this.total && (!this.isSelectAll))|| (duplicateArr.length == 0 && this.isSelectAll)){
+                    this.isCheckAll = true
+                    this.isIndeterminate=false
+                //全不选
+                }else if((duplicateArr.length == 0 && (!this.isSelectAll))|| (duplicateArr.length == this.total && this.isSelectAll)){
+                    this.isCheckAll = false
+                    this.isIndeterminate=false
+                //半选
+                }else{
+                    this.isCheckAll = false
+                    this.isIndeterminate=true
+                }
+            },1)
+        },
+        selectHandle(selection,row){
+            if(this.selectionReactCancel) return 
+            let check = false; 
+            if(selection.some(it => it.EdbInfoId == row.EdbInfoId)){
+                // 勾选
+                if(this.isSelectAll){
+                    check=false
+                }else{
+                    check=true
+                }
+            }else{
+                // 取消勾选
+                if(this.isSelectAll){
+                    check=true
+                }else{
+                    check=false
+                }
+            }
+            if(check){
+                this.selectList.push(row.EdbInfoId)
+                }else{
+                this.selectList=this.selectList.filter(it => it!=row.EdbInfoId)
+            }
+        },
+        selectAllHandle(selection){
+            if(this.selectionReactCancel) return 
+            let check = false; 
+            if(selection && selection.length>0){
+                // 全选
+                if(this.isSelectAll){
+                    check=false
+                }else{
+                    check=true
+                }
+            }else{
+                // 全不选
+                if(this.isSelectAll){
+                    check=true
+                }else{
+                    check=false
+                }
+            }
+            if(check){
+                this.selectList =  [...this.selectList,...this.tableDataIds]
+            }else{
+                this.selectList = this.selectList.filter(it => !this.tableDataIds.includes(it))
+            }
+        },
+        handleSortChange(){},
+        adjustSelection(){
+            this.selectionReactCancel=true
+            if(!this.isSelectAll){
+                this.selectList.map(it =>{
+                    let row = this.tableData.find(da => da.EdbInfoId==it)
+                    if(row){
+                        setTimeout(()=>{
+                            this.$refs.edbDataRef.toggleRowSelection(row,true)
+                        },10)
+                    }
+                })
+            }else{
+                this.$refs.edbDataRef && this.$refs.edbDataRef.clearSelection()
+                this.$refs.edbDataRef &&this.$refs.edbDataRef.toggleAllSelection()
+                this.selectList.map(it =>{
+                    let row = this.tableData.find(da => da.EdbInfoId==it)
+                    if(row){
+                        setTimeout(()=>{
+                            this.$refs.edbDataRef.toggleRowSelection(row,false)
+                        },50)
+                    }
+                })
+            }
+            setTimeout(()=>{
+                this.selectionReactCancel=false
+            },50)
         }
     },
+    mounted(){
+        this.getTableData('optionChange')
+    },
 };
 </script>