el-tabs通过动态组件来更新单个tab页

使用element-ui的el-tabs时，加载页面时会将所有单个tab页渲染出来。
如果两个有联系的单个tab页，其中一个添加了数据，另一个tab页只有刷新才会显示出新的数据。

使用动态组件来更新单个tab页

在data中定义tab列表

	data(){
		return {
			list: [
				{
					label: '账号列表',
					component: 'accountUser'
				},
				{
					label: '角色列表',
					component: 'accountRole'
				},
				{
					label: '管理员列表',
					component: 'accountAdmin'
				}
			]
		}
	}

在模板中

添加tab-click事件，在点击tab页标签时触发。
通过ref来绑定点击时的对应组件。

	<el-tabs @tab-click="switchTab">
		<template v-for="(item,index) in list">
			<el-tab-pane :label="item.label" :key="item.component">
				<component :is="item.component" :ref="item.component"/>
			</el-tab-pane>
		</template>
	</el-tabs>

methods中的switchTab方法

首先要将对应的tab组件通过import引进来。

switchTab(tab){
	if(tab.label === '账户列表') {
		this.$refs.accountRole[0].getList() 
		//accountRole是账户列表对应的组件名，getList是获取列表的方法。
	}else if(tab.label === '角色列表'){
		this.accountRole.getRole()
	}else if(tab.label === '管理员列表'){
		this.accountAdmin.getList()
	}}

总结

总的来说，首先使用v-for来引入单个tab页，其次使用动态组件进行渲染单个tab组件。
通过el-tab自带的tab-click事件在点击tab页时，通过refs来绑定组件并调用相关的方法来实现页面的更新。