关于在使用elementui的tabs组件进行切换组件时会闪屏的解决方案

最新推荐文章于 2024-05-29 16:33:12 发布

钱端攻城狮

最新推荐文章于 2024-05-29 16:33:12 发布

阅读量3k

点赞数 6

分类专栏： Element UI 文章标签： elementui javascript ecmascript

本文链接：https://blog.csdn.net/m0_54932975/article/details/126646904

版权

Element UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在使用elementui的tabs组件进行切换组件时内容会抖动闪屏
起初代码使用如下：

<el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="自定义内容敏感词" name="first"
        ><listContentVue :listData="listData"></listContentVue
      ></el-tab-pane>
      <el-tab-pane label="自定义错别字" name="second"
        ><listContentVue  :listData="listData"></listContentVue
      ></el-tab-pane>
    </el-tabs>

解决闪屏办法：
加v-if 如何加代码如下

<el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="自定义内容敏感词" name="first"
        ><listContentVue  v-if="activeName === 'first'" :listData="listData"></listContentVue
      ></el-tab-pane>
      <el-tab-pane label="自定义错别字" name="second"
        ><listContentVue  v-if="activeName === 'second'" :listData="listData"></listContentVue
      ></el-tab-pane>
    </el-tabs>