VUE+ElementUi学习记录（一）tabs切换导致页面比例不自适应，包含echarts

问题
element-ui中使用tab切换v-chart，实现自适应布局

解决方案
根本原因，elementui的tab标签切换使用的是display:none;

display:none; 
这就导致在动态改变浏览器尺寸的时候，不显示的tab页是无反应的。

网上解决方案汇总
一 使用element-ui中tab自带属性 lazy延时加载
写在每个el-tab-pane 内部即可

<el-tabs v-model="activeName" value="" @tab-click="handleClick">
<el-tab-pane label="用户" name="user" lazy>用户</el-tab-pane>
<el-tab-pane label="服务人员" name="servicer" lazy>服务人员</el-tab-pane>
<el-tab-pane label="订单" name="order" lazy>订单</el-tab-pane>
</el-tabs> 
二 tab子标签栏内内容直接为echart，使用elementui自带的resize()方法
（1）v-chart官方推荐 使用watch监听

<el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="用户管理" name="1"> <!-- name 中的数字对应chart的ref -->
<ve-line :data="chartData" ref="chart1"></ve-line>
</el-tab-pane>
<el-tab-pane label="配置管理" name="2">
<ve-line :data="chartData" ref="chart2"></ve-line>
</el-tab-pane>
</el-tabs> 
watch: {
activeName (v) {
this.$nextTick(_ => {
this.$refs[`chart${v}`].echarts.resize()
})
}
} 
（2）通过使用window监听页面变化

<v-chart ref="runTimes_creditChart"></v-chart>
... 
mounted(){
window.addEventListener("resize", this.resizeTheChart);
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeTheChart);
},
methods: {
resizeTheChart() {
if (this.$refs.runTimes_creditChart) {
this.$refs.runTimes_creditChart.resize();
}
if (this.$refs.transactions_creditChart) {
this.$refs.transactions_creditChart.resize();
}
if (this.$refs.registers_creditChart) {
this.$refs.registers_creditChart.resize();
}
},
} 
三 当el-tab-pane内为自定义组件时，使用v-if

<el-tabs type="card" v-model="tabItem">
<el-tab-pane name="heart">
<span slot="label"><icon name="heart" scale="2"></icon>心率</span>
<baseline ref="heart" :chartData="{}" v-if="'heart' === tabItem"></baseline>
</el-tab-pane>
<el-tab-pane name="breath">
<span slot="label"><icon name="breath" scale="2"></icon>呼吸</span>
<baseline ref="breath" :chartData="{}" v-if="'breath' === tabItem"></baseline>
</el-tab-pane>
<el-tab-pane label="体动" name="move">
<span slot="label"><icon name="move" scale="2"></icon>体动</span>
<baseline ref="move" :chartData="{}" v-if="'move' === tabItem"></baseline>
</el-tab-pane>
</el-tabs> 
当使用tab进行切换时，同一时刻只有一个v-if为true，当将其设置为true时，Vue会重新在页面渲染组件，相当于刷新。（v-if的原理是销毁和新建）

四 使用:key对每个tab-pane组件刷新

<el-tabs v-model="activeName" @tab-click="handleLoad">
<el-tab-pane label="用户" name="1">
<userInfo :key="timer1"></userInfo>
</el-tab-pane>
<el-tab-pane lazy label="数据导入" name="2">
<improtData :key="timer2"></improtData>
</el-tab-pane>
<el-tab-pane lazy label="数据分析" name="3">
<analysisData :key="timer3"></analysisData>
</el-tab-pane>
</el-tabs> 
本质也是对组件的刷新，通过每次点开都重新设置组件的key来完成。

export default {
data () {
return {
activeName: '1',
timer1:'',
timer2:'',
timer3:'',
}
},
methods: {
handleLoad (data) {
let name = data.name
if(name == 1){
this.timer1 = new Date().getTime()
}else if(name == 2){
this.timer2 = new Date().getTime()
}else if(name == 3){
this.timer3 = new Date().getTime()
}
}
},
} 
五 通过css样式改变
替换element的tab内部样式，用block代替none，同时通过动态设置组件高度来进行隐藏和显示

<el-tab-pane label="计算机1" name="Comp" :style="CompStyle" lazy>
<Comp></Comp>
</el-tab-pane>
<el-tab-pane label="计算机2" name="CompTwo" :style="CompStyleTwo" lazy>
<CompTwo></CompTwo>
</el-tab-pane> 
//js
methods: {
handleClick(tab, event) {
if (this.activeTab == 'Comp') {
this.CompStyle.height = '100%';
this.CompTwoStyle.height = '0';
} else if (this.activeTab == 'CompTwo') {
this.CompStyle.height = '0';
this.CompTwoStyle.height = '100%';
}
}
}, 
//css
.el-tab__content {
display: block !important;
}
.el-tab-pane {
display: block !important;
} 
六 使用其他UI库来实现tab组件
这里我们采用ViewUI（iview 4）来替代elementui的tab。

<Tabs value="name1">
<TabPane label="标签一" name="name1">标签一的内容</TabPane>
<TabPane label="标签二" name="name2">标签二的内容</TabPane>
<TabPane label="标签三" name="name3">标签三的内容</TabPane>
</Tabs>
————————————————
版权声明：本文为CSDN博主「anjushi_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_23858785/article/details/108687335