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

直接使用v-show是不起作用的。搜索后，v-show的本质是display:none,因为td的display: table-cell;display权限高于display:none,因此v-show失效，然后可以使用以下方法来实现显示隐藏的控制：方法1：用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中执行时，必须写在thiss中.n e x t T i c k 内 ， 不 然 t h i s . nextick，否则thistick.nexttick内，否则this.refs.tabs.c h i l d r e n [ 0 ] . children[0].children[0].refs.tabs得不到，另外：在网上看到有用的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内容的显示和隐藏。如果你在内部添加标签实验，仍然会有一些问题。也可能是你写错了，决定放弃这种方式。