vue 报表下钻功能开发

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

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

click点击拿到areaCode

<el-table-columnprop=""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-=1this.request = sessionStorage.getItem(`zh021_${this.backStep-1}_type`)this.reportData = JSON.parse(sessionStorage.getItem(`zh021_${this.backStep-1}_data`))

vue 报表下钻功能开发相关推荐

系统项目报表导出功能开发
与正常的导出功能不同,应局方要求需要导出一些截至当前的工程采集状态.提交审核状态等字段.该一类字段需要在导出时进行实时统计并且比较耗时. 1. 前期统计方式:单线程全量统计并返回前端问题:根据当时统 ...
Django+Vue开发生鲜电商平台之11.首页、商品数量、缓存和限速功能开发
文章目录一.首页功能完善 1.轮播图实现 2.新品功能开发 3.商品系列分类展示功能二.商品相关数量功能实现 1.商品点击数.收藏数功能实现 2.商品库存量和销量功能实现三.DRF缓存设置 1. ...
前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）
前端基于vue企业微信JS-SDK语音识别功能开发(同公众号) 微信JS-SDK 1.前期准备前端代码撰写微信JS-SDK 前端需要实现一个功能,如录音,拍照,分享,地理位置等,前端想要实现这些功 ...
Vue使用echarts地图进阶2（实现多级下钻功能）
echarts地图实现多级下钻功能点击下钻效果图: 先来小看一下,多级下钻和单次下钻跳转json文件的区别: 1.如果要实现多级下钻并且展示子区域的话,下钻点击事件请求的JSON必须是该点击区域的全 ...
【SpringBoot项目实战+思维导图】瑞吉外卖①(项目介绍、开发环境搭建、后台登陆/退出功能开发)
文章目录软件开发整体介绍软件开发流程角色分工软件环境瑞吉外卖项目介绍项目介绍产品原型技术选型功能架构角色开发环境搭建数据库环境搭建创建数据库数据库表导入数据库表介绍 Ma ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
方维O2O系统后台业务员功能开发
方维O2O系统后台业务员功能开发需求如下: 开发一个管理员,叫做业务员有特别的权限,就是后台可以给业务员一个账号,然后业务员每次出去拉到团购回来,上传商户,之后,运营后能在业务员自己的账号权限内看 ...
锐浪报表数据源access_kylin+SuperSet实现实时大数据报表的快速开发
最近我的团队将报表计算引擎从阿里的OLAP分析中间价迁移到了kylin上,解决了非常多的问题,将一些我们的解决方案分享出来,希望对读者或者在用kylin的人有所帮助. 一. 之前现状和问题之前我们系 ...
Spring Boot和Vue的学习(一)--开发环境的安装
前言闲来无事,想学一些框架,查了一些资料,说用前后端分离开发比较主流,同时比较热门的是Spring Boot+Vue开发,久仰大名,现在正好学习一下. 学习视频:4小时学会Spring Boot+V ...

vue 报表下钻功能开发

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

下钻后点返回返回上一层

vue 报表下钻功能开发相关推荐

最新文章

热门文章

vue 报表下钻功能开发

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

下钻后点返回 返回上一层

vue 报表下钻功能开发相关推荐

最新文章

热门文章

下钻后点返回返回上一层