怎样切换tab显示不同的数据

1.需求

点击不同的tab选项卡，会切换到不同的内容项目

2.实现

在成功调用接口后，数据展示如图所示

3.代码

以下为主要代码的逻辑
解读this.query.auditType = 4;意思就是访问后台的数据的状态类型为4（根据接口文档给出的），用Switch条件读出来。

// 访问后台的数据query: {current: 1,auditType: "",},// 后台返回的数据dataList: {rows: [{}],},current: 0,//查询当前登录用户需要审核的工单列表 getOrderAuditList() {serve.getAuditList(this.query).then((res) => {uni.stopPullDownRefresh();this.dataList = res;})},//切换tabchange(index) {this.current = index;this.query.current = 1;switch (index) {case 0:this.query.auditType = "";break;case 1:this.query.auditType = 6;break;case 2:this.query.auditType = 5;break;case 3:this.query.auditType = 1;break;case 4:this.query.auditType = 4;break;case 5:this.query.auditType = 2;break;case 6:this.query.auditType = 3;break;default:console.log("err");}this.getOrderAuditList();},

怎样切换tab显示不同的数据相关推荐

微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴 ...
Vue+element-ui实现含有多个tab标签页的编辑页面，watch监听数据变更，切换tab页时提醒数据变更。
思路: 1.监听表单绑定数据的变更 2.切换页面时判断表单绑定数据是否发生变更.如果发生变更,给出提示,由用户选择放弃变更跳转到新的tab还是留在原tab页面. <template>< ...
解决echart在tab中切换时显示不正确
在VUE使用Element UI时,在el-tab-pane添加上lazy='true'属性即可 <el-tab-pane label="远程测试控制" name=" ...
js利用tab键切换当前页面_JS实现的tab切换并显示相应内容模块功能示例
本文实例讲述了JS实现的tab切换并显示相应内容模块功能.分享给大家供大家参考,具体如下: 思路:一层循环遍历操作的元素并获取当前遍历到的元素的下标,通过下标去选择显示对应的内容模块. 二层循环将元素 ...
1.Echarts的坑：切换tab时，echart显示默认的100px
1.切换tab时,echart显示默认的100px 切换tab时,elementUI的原理设置v-show 元素被隐藏,切换的时候echart 获取不到父元素高度 1.2 效果 1.3 解决方法切换 ...
Flutter切换tab后保留tab状态
Flutter切换tab后保留tab状态概述 Flutter中为了节约内存不会保存widget的状态,widget都是临时变量.当我们使用TabBar,TabBarView是我们就会发现,切换tab ...
给echarts添加筛选时间控件时，控件不显示，并设置数据库无数据时echarts模块显示暂无数据
给echarts模块添加时间控件时,控件无效,经检查发现,控件被画布遮盖了,需要用一个form标签包括时间控件,否则时间控件不生效.另外,如果echarts从后台获取到的数据为空,需要提示暂无信息.这 ...
react滑动切换tab动画效果_[React Native]react-native-scrollable-tab-view(入门篇)
官方为我们提供的Tab控制器有两种: TabBarIOS,仅适用于IOS平台 ViewPagerAndroid,仅适用于Android平台(严格来讲并不算,因为我们还需要自己实现Tab) 如果我们需要 ...
html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...

怎样切换tab显示不同的数据

1.需求

2.实现

3.代码

怎样切换tab显示不同的数据相关推荐

最新文章

热门文章