1.首先點擊復選框的時候要將所有的值存起來
// 復選框 handleSelectionChange(data) { this.selectDataForPage[this.tableData.page] = data; this.$emit("selection-change", data, this.selectDataForPage); },
2.表格需要監聽選中方法
3.將值傳遞到父頁面
4.將選擇的全部的值值保存起來,方便獲取
//設備列表復選框選中 selectDeviceExport(data,allData){ var activityList = []; const activityData = allData; for (const key in activityData) { if (activityData[key]) { activityList = activityList.concat(activityData[key]); } } this.$store.commit("selectDeviceExportAll",activityList); this.selectedDeviceList = this.$store.state.selectDeviceExportAll; },
5.這個是獲取所有分頁列表的方法,獲取到的內容和選中的做比對,如果存在則勾選內容
//獲取設備列表 getDeviceList() { if(this.conditionalSearch.categoryId&&this.conditionalSearch.categoryId.length>0){ this.conditionalSearch.categoryId = this.conditionalSearch.categoryId[this.conditionalSearch.categoryId.length-1]; } pageDeviceList(this.conditionalSearch).then((res) => { if(res.data.code == '200'){ this.deviceListData.data = res.data.data.rows; this.deviceListData.total = res.data.data.totalRows; this.deviceListData.page = res.data.data.pageNo; this.deviceListData.pageSize = res.data.data.pageSize; if(res.data.data.length>0){ this.versionId = res.data.data.rows[0].dataVersion&&res.data.data.rows[0].dataVersion[0].id; this.deviceRowDetail = res.data.data.rows[0]; } this.toggleRowSelection(); } }); },
5。做比對的方法
//分頁后為復選框添加選中的內容默認選中 toggleRowSelection(){ let data = this.deviceListData.data; let rzTable = this.$refs.deviceTabRef.$refs.commonTableRef.$refs.rzTable; this.selectedDeviceList&&this.selectedDeviceList.forEach(ele=>{ data&&data.forEach(ele2=>{ if(ele.id==ele2.id){ this.$nextTick(()=>{ rzTable.toggleRowSelection(ele2,true); }); } }) }) },
最后通過this.$store.state.存儲的值名稱就可以獲取到選中的值了