直接用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>

用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);
});

:写在页面初始化时,需要mounted里面执行时,一定要写在this. n e x t T i c k 内 , 不 然 t h i s . nextTick内,不然this. nextTickthis.refs.tabs. c h i l d r e n [ 0 ] . children[0]. 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>

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

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

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐