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

标签：vue,res,deviceListData,复选框,勾选,conditionalSearch,data,categoryId
来源： https://www.cnblogs.com/web-aqin/p/14665917.html