vue+element-ui制作tab切换踩过的坑
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>
</el-tab-pane>
<el-tab-pane label="⾃动分组策略" name="autoGroup":key="'autoGroup'">
<autoGroup></autoGroup>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import hostList from './hostList'
import groupManage from './groupManage'
import autoGroup from './autoGroup'
export default{
name:'hostManage',
components:{
hostList,
groupManage,
autoGroup
},
data(){
return{
//默认第⼀个选项卡
activeName:"hostList",
}
},
mounted(){
}
}
</script>
刚开始没注意，页⾯开发环境没问题，当进⼊⽣产环境，慧眼⾃动监控，页⾯性能就出现了问题。
F12看到，进⼊这个菜单⼀次发送三个页签的查询请求。
也就是说，这种⽅式，页签默认渲染三个页签。
【解决问题】
思路，既然三个页签⼀起渲染，性能肯定有问题，发送了不应该发送的请求。
所以想办法只允许当前页签进⾏渲染，其实很简单v-if
就能搞定。
<template>
<div class="mainBody">
<el-tabs v-model="activeName">
<el-tab-pane label="主机管理" name="hostList":key="'hostList'">
<hostList v-if="activeName=='hostList'"></hostList>
</el-tab-pane>
vue element admin
<el-tab-pane label="分组管理" name="groupManage":key="'groupManage'">
<groupManage v-if="activeName=='groupManage'"></groupManage>
</el-tab-pane>
<el-tab-pane label="⾃动分组策略" name="autoGroup":key="'autoGroup'">
<autoGroup v-if="activeName=='autoGroup'"></autoGroup>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import hostList from './hostList'
import groupManage from './groupManage'
import autoGroup from './autoGroup'
export default{
name:'hostManage',
components:{
hostList,
groupManage,
autoGroup
},
data(){
return{
/
/默认第⼀个选项卡
activeName:"hostList",
}
},
mounted(){
}
}
</script>
实施遇到了⼀点问题，v-if=“activeName==‘groupManage’” 值有个单引号，不专业的时间成本付出。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。