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>