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.存储的值名称就可以获取到选中的值了

posted @ 2021-04-16 10:43  遇你温柔如初  阅读(1962)  评论(0编辑  收藏  举报