问题

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.nameif(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>

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

【ElementUI】el-table 多表格切换导致 expands 展开行仍然会保留的问题（多表格切换时的表格渲染错乱）
首先先叙述一下需求和遇到的问题: 需求: 在这个页面里,我需要去判断查询条件,从而在不同的条件下,展示不同的表格数据,即在不同情况下,展示不同的表格或者说表格的数据列,从而在不同的条件下看到不同的表格 ...
【VUE】学习记录一
[VUE]学习记录学习视频为:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 1.查询vue知识点: https://v2.cn.vuejs.org/ 2. 下载和引入 2.1 下 ...
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象自我记录. Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做除了使 Vue 变 ...
在做vue h5 时因改变手机字体导致页面布局错乱比如在微信公众号中放入h5 客户把手机字体或者微信字体调大导致页面错乱
认定了就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油骚年 ** 正文: ** 在做vue h5 时因改变手机字体导致页面布局错乱比如在微信公众号中放入h5 客户把手机字体或者微信字 ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
vue基础学习记录（一）
根据B站黑马程序员 VUE教程基础学习为了毕业设计做准备 Vue基础工具准备 Vue的基本使用步骤 vue模板语法 `v-cloak`指令用法数据绑定指令数据响应式双向数据绑定 MVVM设计 ...
vue基础学习记录（三）
一.生命周期(钩子函数) 实例生命周期钩子 new Vue ({beforeCreate:function(){alert("组件实例化之前执行的函数");},created:fu ...
安装vue Devtools学习记录
在学习vue之前,建议使用Google chrome上安装vue devtools拓展工具.vue devtools提供界面供我们查看vue组件和全局状态管理器vuex中记录的数据. 有条件的可以直接 ...
基于VueAxios制作音乐播放器(bilibili黑马程序员Vue入门学习记录)
目录使用Vue制作一个音乐播放器前言 Vue Vue导入 Vue挂载 Vue指令 v-text v-html v-on v-show v-if v-bind v-for v-model axios ...

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

问题

解决方案

网上解决方案汇总

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

最新文章

热门文章