[JavaScript知识库]iview Tabs 标签页切换时调用页面的查询方法

1、给Tabs添加@on-click，TabPane添加name，自定义页面添加ref
2、on-click方法

currentTabChanged(name){
	//防止多次点击已显示标签页重复刷新问题
	if (name != this.tabName) {
		this.tabName=name;
		if (this.tabName == 'index') {
			this.$refs.index.onSubmit();
		} else if (this.tabName == 'reconciliation') {
			this.$refs.reconciliation.onSubmit();
		} 
	}
}

全部页面代码：

<template>
	<div id="aaa" style="height: max-content">
		<Tabs :animated="false" active-key="index" @on-click="currentTabChanged" style="background-color: #ffffff;width: auto;height: auto">
			<TabPane label="记录" key="index" name = "index">
				<view-travel-ratio-index ref="index" />
			</TabPane>
			<TabPane label="导入" key="importTicketInfo" name = "importTicketInfo">
				<view-import-ticket-info ref="importTicketInfo" />
			</TabPane>
			<TabPane label="记录" key="reconciliation" name = "reconciliation">
				<view-reconciliation-index ref="reconciliation" />
			</TabPane>
			<TabPane label="记录" key="handleLog" name = "handleLog">
				<view-handle-log :selectLogTypeList="[11]" ref="handleLog" />
			</TabPane>
		</Tabs>
	</div>
</template>
<script>
	import ViewTravelRatioIndex from './travelRatioIndex.vue'
	import ViewReconciliationIndex from './reconciliationIndex.vue'
	import ViewImportTicketInfo from './importTicketInfo.vue'
	import ViewHandleLog from '@/views/user/platFormLog/index.vue'

	export default {
		data() {
			return {
				tabName:null
			}
		},
		components: {
			ViewTravelRatioIndex,ViewReconciliationIndex,ViewHandleLog,ViewImportTicketInfo
		},
		methods: {
			currentTabChanged(name){
				//防止多次点击已显示标签页重复刷新问题
				if (name != this.tabName) {
					this.tabName=name;
					if (this.tabName == 'index') {
						this.$refs.index.onSubmit();
					} else if (this.tabName == 'reconciliation') {
						this.$refs.reconciliation.onSubmit();
					} 
				}
			}
		},
		mounted() {
		}
	}
</script>