vue中tab隐藏display:none（v-show无效，v-if有效）

目录

背景

原因：display: table-cell>display:none

解决：

方法A.获取元素设置display（适用于 简单场景）

方法B.自定义tabs​​​​​​​ （适用于 复杂场景）

---

背景

• 内联样式(style=“ ”)   /this.$refs.tabs.$children[1].$el.style.display = ''都无效
• v-if能动态创建，当点击tab时才会消失，active状态时点击也不能消失，说明是缺乏渲染同步？，但是设置为同步渲染，v-if却失效了
• v-for、动态pop、push在matrix中不生效，也不适用大组件
• 单个tab、动态pop、push在matrix不生效
• keepalive只适用于初始就显示所有的，后来才需要隐藏

原因：display: table-cell>display:none

编译前和运行时标签不同

martix

解决：

方法A.获取元素设置display（适用于 简单场景）

  checkboxChange() {// martixsconst tabs = document.querySelectorAll('.mds-tabs-tab');//NodeListconst firstTab = tabs[0] as HTMLElement; // 将元素类型指定为 HTMLElementif (firstTab.style.display == 'none') {firstTab.style.display = 'block';} else {firstTab.style.display = 'none';}console.log(tabs);const tabsArray = [...tabs];//arryconsole.log(tabsArray);//elementfor (const dataType of this.formData.moduleDataType) {console.log("dataType:", dataType);console.log(this.$refs.tabs.$children[0].$el.style)}}

方法B.自定义tabs​​​​​​​ （适用于 复杂场景）