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,//上面已经定义,这里直接可以使用this
		        query:this.queryParams
		      }
			const res = await listTransferAndApprova(data)
			uni.hideLoading()
			this.requestList = res.rows
		},
		//点击详情,传递mark值过去
		detail(item) {
		//上面已经定义,这里直接可以使用this
            item.mark = this.mark;
			uni.navigateTo({
				url: `/subpkg/allot/allotAuditDetail?item=${JSON.stringify(item)}&itemId=${this.tabsCurrent}`
			});
		},
	}
}

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值