vue + element-ui 制作tab切换踩过的坑

最新推荐文章于 2025-05-09 15:23:19 发布

JDIT

最新推荐文章于 2025-05-09 15:23:19 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： elmentui 文章标签： element-ui tabs

本文链接：https://blog.youkuaiyun.com/weixin_38280568/article/details/102625420

本文讲述了Java开发者在紧急接手前端项目时遇到的问题，主要关于使用Element-UI的tabs组件导致的性能问题。在生产环境中，每个tab页签加载时都会发送不必要的查询请求。通过添加v-if指令，只在当前选中页签时渲染内容，解决了这个问题，但过程中因编码细节不熟悉而增加了时间成本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JAVA开发人员立即投入前端页面开发，确实学习时间半天够了。
但是问题来了，专业的人员做专业的事情，界面看一个样，但是细节和编码风格专业的人士一看就是怪异。

【问题描述】
做一个主机管理的tabs，页面包含三个页签。
主机管理，分组管理，自动分组策略。

<template>
    <div class="mainBody">
        <el-tabs v-model="activeName">
            <el-tab-pane label="主机管理" name="hostList" :key="'hostList'">
                <hostList></hostList>
            </el-tab-pane>
 
   		<el-tab-pane label="分组管理" name="groupManage" :key="'groupManage'">
                <groupManage></groupManage>