拿到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`))