tab栏切换,路径传参写死的情况,切换一次路径随之改变

tab栏,使用uview提供的tabs
网址:https://uviewui.com/components/tabs.html

<u-tabs :list="tabsList" :scrollable="false" @change="tabsChange" :current="tabsCurrent"></utabs>
<view class="select-info"><view v-if="tabsCurrent === 0"><uni-easyinput class="datetime-select" placeholder="请输入资产名称" ></uni-easyinput></view><view v-if="tabsCurrent === 1"><uni-easyinput class="datetime-select" placeholder="请输入资产名称" ></uni-easyinput></view><view v-if="tabsCurrent === 2"><uni-easyinput class="datetime-select" placeholder="请输入资产名称" ></uni-easyinput></view><view v-if="tabsCurrent === 3"><uni-easyinput class="datetime-select" placeholder="请输入资产名称" ></uni-easyinput></view><!-- 这里是每个tab切换对应的内容,这里举例一个其他复制,改v-if="tabsCurrent==0"  --><scroll-view scroll-y class="content-list"><!-- 原部门审核数据 --><view v-if="tabsCurrent==0" class="wrap"><uni-table ref="table" :loading="loading" border stripe emptyText="暂无数据"><uni-tr><uni-th width="70" align="center">资产编码</uni-th><uni-th width="50" align="center">操作</uni-th></uni-tr><uni-tr v-for="(item, index) in filteredList" :key="index"><uni-td align="center">{{ item.assetCode || '-' }}</uni-td><uni-td align="center"><button class="uni-button" size="mini" type="primary" @click="detail(item)">详情</button></uni-td></uni-tr></uni-table></view></scroll-view>
</view>

JS

export default {data() {return {//默认切换的下标为0,也是第一个tabsCurrent: 0, //tab栏标题tabsList: [{name: "原部门审核"}, {name: "新部门审核"}, {name: "管理审核"}, {name: "价值审核"}],mark:2,//默认第一个tabs路径是2}},methods:{tabsChange(e) {//每次切换时使列表都清空this.requestList=[]//每次切换显示都默认显示第一页数据this.queryParams.pageNum = 1;//点击tab切换,表示当前点击的是哪些this.tabsCurrent = e.index;//切换时加loading效果uni.showLoading({title: '数据加载中',});switch (e.index) {case 0:this.mark='2'break;case 1:this.mark='3'break;case 2:this.mark='4'break;case 3:this.mark='5'break;}//每次切换都发请求this.getListTransferAndApprova()},//调接口async getListTransferAndApprova() {const data ={mark:this.mark,//上面已经定义,这里直接可以使用thisquery:this.queryParams}const res = await listTransferAndApprova(data)uni.hideLoading()this.requestList = res.rows},//点击详情,传递mark值过去detail(item) {//上面已经定义,这里直接可以使用thisitem.mark = this.mark;uni.navigateTo({url: `/subpkg/allot/allotAuditDetail?item=${JSON.stringify(item)}&itemId=${this.tabsCurrent}`});},}
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/193705.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Canal+Kafka实现MySQL与Redis数据同步(二)

CanalKafka实现MySQL与Redis数据同步&#xff08;二&#xff09; 创建MQ消费者进行同步 在application.yml配置文件加上kafka的配置信息&#xff1a; spring:kafka:# Kafka服务地址bootstrap-servers: 127.0.0.1:9092consumer:# 指定一个默认的组名group-id: consumer-group…

Python 如何实现职责链设计模式?什么是职责链设计模式?Python 职责链设计模式示例代码

什么是职责链&#xff08;Chain of Responsibility&#xff09;设计模式&#xff1f; 职责链&#xff08;Chain of Responsibility&#xff09;设计模式是一种行为型设计模式&#xff0c;旨在构建一个对象链&#xff0c;每个对象都有机会处理请求&#xff0c;并且可以将请求传…

IDEA插件推荐:Apipost-Helper

Hello&#xff0c;大家好&#xff0c;我是灰小猿。 今天分享一下我最近在开发过程中发现的一个比较实用的IDEA插件—Apipost-Helper IDEA虽然能够帮助开发人员更加高效地编写、调试和部署软件应用程序。但我们在编写完接口代码后肯定还需要进行接口调试等操作&#xff0c;这个…

国际知名商学院复旦大学EMBA荣登全球第8位,中文项目国内居首

2023年10月16日&#xff0c;英国《金融时报》&#xff08;FT&#xff09;发布全球EMBA项目排名。复旦大学EMBA位列全球8强&#xff0c;蝉联中文项目全球第一。学术研究、生源资历、商学院顾问委员会国际化程度、整体满意度等数个重要指标位列中文项目全球第 1位。    排名不…

apply和call在Javascript中的使用与区别

apply和call在js中的使用与区别&#xff1a; 字符串格式化&#xff1a; ${占位符} name小帅 console.log(我是${name}) //我是小帅apply: 语法&#xff1a;function.apply(thisArg, [argsArray])thisArg&#xff1a;可选参数&#xff0c;指定函数执行时的上下文&#xff08…

Bootloader——预编程流程

预编程目录 前言一、预编程步骤1.1 切换到扩展会话1.2 检查刷写前提条件整车ECU进入扩展会话(补充)1.3 停用故障码存储功能1.4 停止通信(一般报文或网络管理报文)前言 刷写过程定义了刷写前、刷写中、刷写后三个阶段。 一、预编程步骤 预编程步骤用来做刷写前的CAN网络准…

公共字段自动填充-@TableField的fill实现(2)

TheadLocal 客户端发送的每次http请求&#xff0c;在服务端都会分配新的线程。因此登录检查过滤器、controller、元数据对象处理器属于一个线程。 TheadLocal是线程的局部变量&#xff1a; TheadLocal常用方法&#xff1a; 如何在元数据对象处理器中获取当前登录用户的id&…

二十、虚拟机网络配置

1、Linux网络配置原理 我自己Linux虚拟机的IP地址是&#xff1a;192.168.159.131 vmnet8&#xff1a;192.168.159.1 无线网卡&#xff1a;192.168.159.1 2、查看网络IP和网关 查看虚拟网络编辑器和修改IP地址 如果把这个位置的子网IP换成&#xff1a;192.168.8.0的话重启虚拟机…

【开源】基于Vue.js的在线课程教学系统的设计和实现

项目编号&#xff1a; S 014 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S014&#xff0c;文末获取源码。} 项目编号&#xff1a;S014&#xff0c;文末获取源码。 目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2…

数字IC前端学习笔记:异步复位,同步释放

相关阅读 数字IC前端https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 异步复位 异步复位是一种常见的复位方式&#xff0c;可以使电路进入一个可知的状态。但是不正确地使用异步复位会导致出现意想不到的错误&#xff0c;复位释放便是…

力扣hot100 两数之和 哈希表

&#x1f468;‍&#x1f3eb; 力扣 两数之和 &#x1f60b; 思路 在一个数组中如何快速找到某一个数的互补数&#xff1a;哈希表 O(1)实现⭐ AC code class Solution {public int[] twoSum(int[] nums, int target){HashMap<Integer, Integer> map new HashMap<&g…

安卓源码-工程目录

1、程序启动配置及主要的权限声明 2、 界面渲染 3、 布局用 4、 常量等 5、 gradle构建