vue復選框勾選的內容,點擊分頁之后勾選的狀態仍然保存。


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.存儲的值名稱就可以獲取到選中的值了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM