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

  • 相关阅读:
    第五周总结
    构建之法阅读笔记02
    第四周总结
    使用HttpClient+Json解析器爬取数据并存入数据库
    构建之法阅读笔记01
    使用Echarts+Javaweb可视化数据库中数据
    Oracle自我补充之trunc()函数使用介绍
    Oracle自我补充之OVER()函数介绍
    SpringMVC详细示例实战教程(较全开发教程)
    eclipse逆向生成hibernate的实体类(注解和配置文件)
  • 原文地址:https://www.cnblogs.com/web-aqin/p/14665917.html
走看看 - 开发者的网上家园