element-ui 通过v-show去显示和隐藏tabs的pane

最新推荐文章于 2026-06-20 16:56:19 发布

原创最新推荐文章于 2026-06-20 16:56:19 发布 · 2.1w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

3 篇文章

订阅专栏

在Element-UI中，使用v-if控制tabs的pane会导致数据丢失，因为v-if会销毁并重新创建组件。为解决此问题，可以采用控制pane的display属性实现显示和隐藏。此外，文章提及一种可能的方法——结合keep-alive，但未实际验证。

通过v-if去控制tabs的pane显示和隐藏，会赞成数据无法保留，因为v-if会销毁组件，再重新创建。

我这里是通过设置选项卡的显示和隐藏（控制display）来做到的

// watch监听
watch: {
      'ruleForm.isbrand' : {  // 监听ruleForm的isbrand(是否品牌)被选中了
        handler (newVal, oldVal) {
          this.showTabPane(this.ruleForm.isbrand, 'tab-brand') // tab-brand是id名字，自己去html中查看tabs选项卡的dom节点id名
        },
        immediate: true
      },
      'ruleForm.isspecification' : {
        handler (newVal, oldVal) {
          this.showTabPane(this.ruleForm.isspecification, 'tab-spec')
        },
        immediate: true
      }
    }

// mehods里面定义showTabPane方法
showTabPane (control, pane) {
        let dom = '';
        this.$nextTick(() => {
          dom = document.getElementById(pane)
          if (control == 1) {
            dom.style.display = 'inline-block';
          } else {
            dom.style.display = 'none';
          }
        })
      }

完整选项卡：

▍最近又看到一个方法，但是我没试过，之后可以试下：

●使用keep-alive

https://juejin.cn/post/6844903481224986638#heading-8 (搜索tabs)

<el-tabs v-model="activeTab">
  <el-tab-pane label="简介及公告" name="announcement">
    <announcement />
  </el-tab-pane>
  <el-tab-pane label="资讯" name="information">
    <keep-alive>
      <information v-if="activeTab=='information'" />
    </keep-alive>
  </el-tab-pane>
  <el-tab-pane label="直播流配置" name="stream">
    <keep-alive>
      <stream v-if="activeTab=='stream'" />
    </keep-alive>
  </el-tab-pane>
</el-tabs>