Vue 中 el-tab-pane组件 使用v-show不生效问题

Vue 中 el-tab-pane 使用v-show不生效问题

在开发中遇到一个需求，需要根据是否有权限来显示和隐藏 tab页，一开始想使用v-if 来做到隐藏和显示
可是遇到了两个问题

1. 父组件有部分依赖了子组件的值，所以需要组件的refs 里有值，但是由于v-if的惰性，可能还没有出现 ，在computed中已经开始访问 子组件里 的属性了，这时候就会报错
2. 由于会频繁的需要展示和隐藏 这个tab，这时候v-if就会导致对于性能造成不必要的浪费

于是转而使用v-show 却发现无论变量如何改变都不会生效，查阅文档得知，由于tab是复杂组件，而v-show仅仅是单纯的加个display:none,子级里 的display权限大于它所以无法生效，只能使用js来控制 display的显示

方法如下:

watch:{
	'会改变的值'(val){
		document.getElementById(`tab-${需要设置的tab的name}`).style.display = 'none' //如果需要展示出来，改成 inline-block 即可
	}
}

另一种方法

可以使用v-for循环渲染 el-tab-pane 然后监听值的变化 pop 或者push，但是不适用于大组件的展示，故不做展示