无需升降级，解决 elementui el-tab-pane 导致浏览器卡死的问题。

指甲盖挠黑板

已于 2023-08-24 11:10:28 修改

阅读量418

点赞数 1

文章标签： elementui vue.js 前端

于 2023-06-10 14:45:42 首次发布

本文链接：https://blog.csdn.net/guochangheng/article/details/131141885

版权

el-tab-pane居然不适配直接引入组件，奇葩，原代码如下：

      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="启停磨" name="first">
            <optimizeTeacher
              :unit-id="initData.unitId"
              :init-data="initData"
            ></optimizeTeacher
          ></el-tab-pane>
          <el-tab-pane label="启停机" name="second">
            <optimizeTeacher2
              :unit-id="initData.unitId"
              :init-data="initData"
            ></optimizeTeacher2>
          </el-tab-pane>
        </el-tabs>
      </div>

点击页面会直接导致浏览器卡死崩溃。

解决方案，升降级什么的太麻烦了，直接把组件摘出来，加v-if判断

      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="启停磨" name="first"> </el-tab-pane>
          <el-tab-pane label="启停机" name="second"> </el-tab-pane>
        </el-tabs>
        <div>
          <optimizeTeacher
            v-if="activeName == 'first'"
            :unit-id="initData.unitId"
            :init-data="initData"
          ></optimizeTeacher>
          <optimizeTeacher2
            v-if="activeName == 'second'"
            :unit-id="initData.unitId"
            :init-data="initData"
          ></optimizeTeacher2>
        </div>
      </div>

至此，完美解决！