vue 报表下钻功能开发[通俗易懂]

大家好，欢迎来到IT知识分享网。

拿到areaCode初始值，下钻的时候把点击获取到的areaCode赋值上去就可以实现下钻功能

let data = { 
   
         areaType: this.areaType, // 后台默认是1
         areaCode: this.reqData.areaCode,
       }
       ceApi.getcqData(data).then(res => { 
   
         if (res.success) { 
   
           this.loading = false
           this.reportData = res.data
           this.type = 0
         } else { 
   
         }
       })

click点击拿到areaCode

<el-table-column
        prop=""
        label="区域名称"
       >
        <template slot-scope="scope">
          <div class="active" v-html="type==0?scope.row.areaName:scope.row.officeName" @click="doDrillDown(scope.row.areaCode,scope.row.areaType,scope.row.officeType,scope.row.officeCode)"></div>
        </template>
      </el-table-column>

形参接收 拿到areaCode值

doDrillDown(code,areaType,type,officeCode){ 
   
      this.reqData.areaCode = code;
 }

下钻后点返回 返回上一层

在点击下钻的时候，把每次获取到的areaCode push到一个数组里，点击返回的时候，删除数组的最后一个元素，重新赋值给获取数据的参数，再调一次接口

doDrillDown(code,areaType,type,officeCode){ 
   
   // 把获取到的code push到空数组里
   this.drillDownIdArray.push(code);
}

 /** * 下钻后返回 */
    doDrillDownBack(){ 
   
      this.drillDownIdArray.pop();
      let nowCode = this.drillDownIdArray[this.drillDownIdArray.length - 1];
      this.reqData.areaCode = nowCode;
      this.getData();
    },

补充优化：
这个下钻和返回都是覆盖掉之前的参数，然后重新调接口，如果数据很多的话，加载就会很慢很慢，那就可以吧下钻拿到的值存起来，返回的时候重新展示到页面就可以。
例如：[表名]-[一级]-[数据] 、 [表名]-[一级]-[数据类型]:机构|部门 (推荐-用下划线)

// 拿到数据后保存
sessionStorage.setItem("zh021_"+this.backStep+"_data",JSON.stringify(res.data))
sessionStorage.setItem("zh021_"+this.backStep+"_type",JSON.stringify(this.request)) // 不同的接口
this.backStep++; // 等级数(也可以用areaType值，自己定)

// 返回让步数减一
 this.backStep-=1
 this.request = sessionStorage.getItem(`zh021_${ 
     this.backStep-1}_type`)
 this.reportData = JSON.parse(sessionStorage.getItem(`zh021_${ 
     this.backStep-1}_data`))