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>
   
	<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}`
			});
		},
	}
}

tab栏切换,路径传参写死的情况,切换一次路径随之改变_第1张图片

你可能感兴趣的:(前端,uni-app)