element-ui中的el-tab-pane实现显示隐藏的方法

直接用v-show是不起作用的，经过查找是说v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效，那么要实现显示隐藏的控制可以进行使用如下的方式：
方式一：
最简单有效的用v-if取代v-show实现。

方式二：
在el-tabs标签上添加ref，通过js进行控制，具体实现如下：
例子：

<el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs">
	<el-tab-pane name="20" label="选项1"></el-tab-pane>
	<el-tab-pane name="30" label="选项2"></el-tab-pane>
	<el-tab-pane name="40" label="选项3"></el-tab-pane>
</el-tabs>
1
2
3
4
5

用js进行控制：

this.$nextTick(() => {
	this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
	console.log(this.$refs.tabs.$children[0].$refs);
	console.log(this.$refs.tabs.$children[0].$refs.tabs);
});
1
2
3
4
5

注：写在页面初始化时，需要mounted里面执行时，一定要写在this.$nextTick内，不然this.$refs.tabs.$children[0].$refs.tabs获取不到，为undefined

另：
在网上看到有用keep-alive实现的
例子：

<el-tabs v-model="activeName">
	<el-tab-pane>
		<keep-alive>
			<span slot="label" v-if="false">选项1</span>
		</keep-alive>
	</el-tab-pane>
	<el-tab-pane label="选项2">
		<keep-alive>
			<span slot="label" v-if="true">选项2</span>
		</keep-alive>
	</el-tab-pane>
	<el-tab-pane label="选项3">
		<keep-alive>
			<span slot="label" v-if="false">选项3</span>
		</keep-alive>
	</el-tab-pane>
</el-tabs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果这么写是没有问题的话，这么实现是有问题的，而且还会影响这个导航的样式，并不是单纯的显示隐藏的问题了。

还有一种实现说是v-show仅能控制的是标签内lr-detail内容的显示隐藏，自己在内部加标签实验，还是会有一些问题，也可能是自己写的实现方式不对，决定弃用此种方式。