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,但是不适用于大组件的展示,故不做展示

Logo

前往低代码交流专区

更多推荐