zoukankan      html  css  js  c++  java
  • 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.存储的值名称就可以获取到选中的值了

  • 相关阅读:
    rapidjson 使用
    【设计模式】模板方法模式
    【设计模式】策略模式
    【设计模式】建造者模式
    【设计模式】享元模式
    /dev/sda1 contains a file system with errors,check forced.
    如何编写高效的Python的代码
    VsCode 调试 Python 代码
    Python 使用 pyinstaller 打包 代码
    初次使用git上传代码到github远程仓库
  • 原文地址:https://www.cnblogs.com/web-aqin/p/14665917.html
Copyright © 2011-2022 走看看