iview中的tab切换

最新推荐文章于 2023-10-18 14:37:19 发布

原创最新推荐文章于 2023-10-18 14:37:19 发布 · 8.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #iview

vue.js 专栏收录该内容

13 篇文章

订阅专栏

本文主要介绍了在Vue.js项目中，如何利用iview组件库实现Tab切换效果，包括切换逻辑和结合分页功能的应用。

tab切换

	<TabPane label="维护记录" name="name4">
		<div class="filter mb10" :style="{background:'#2C345B'}">
					<Tabs @on-click="changeTab">
						<TabPane :label="'全部'+(tagCount[2] ? tagCount[2] : 0)" name="2"></TabPane>
						<TabPane :label="'待维护'+(tagCount[0] ? tagCount[0] : 0)" name="0"></TabPane>
						<TabPane :label="'已维护'+(tagCount[1] ? tagCount[1] : 0)" name="1"></TabPane>

					</Tabs>
				</div>
				<div class="zhuanyi">
					<Table class="ml40" border stripe :columns="columnsData2" :data="tableData2" :disabled-hover="true" width="100%" style="margin-left:0px"></Table>
				<div class="page-item" id="page">
					<Page :total="pageCountTow" show-total @on-change="changepageTow"/>
				</div>
		</div>
	</TabPane>

判断

	changeTab(value){				
		this.whjl_add_count = value;
			this.searchForm.pageNo=1;
			if(value =='2'){
				value = "";
			}
			deviceService.maintainRecordList({deviceId:this.whjlID ,orderStatus:value}).then(rs => {										
				this.tableData2 = rs.data.list;
				this.pageCountTow = rs.data.recordCount;
			})									
		},

分页

	changepageTow(val){		// 设备维护记录  分页
		this.searchForm.pageNo = val++;
			if (this.whjl_add_count == 2)
				this.whjl_add_count = "";
	                            this.searchForm.orderStatus = this.whjl_add_count;
	                            this.searchForm.deviceId = this.whjlID;
				deviceService.maintainRecordList(this.searchForm).then(rs => {
				
				this.tableData2=rs.data.list;
				this.pageCountTow=rs.data.recordCount;
			})	
		},