【Vue2】工作后遇到的一些小问题——Element UI篇

解决el-table表格底部的白色横线

在el-table所在的组件中添加这个样式即可。

/deep/ .el-table::before{
  background-color:transparent;
}

el-tabs标签页进行切换时的echarts渲染问题

在使用el-tabs进行切换时，没有选中的页面不会被渲染，如果echarts图在这些未被渲染的页面中，echarts 无法准确获取到其容器的尺寸，宽高则会变成100px*100px。

1. 最简单的办法就是给echarts图表固定高度，这样即使页面未被渲染图表的宽高也已经有了固定的尺寸。

 .echarts {
    width: 600px; /* 或任何适合的宽度 */
    height: 400px; 
  }

2. 使用 echarts 提供的的 resize() 方法

methods: {
  handleTabChange(tab, event) {
    if (tab.name === 'tab2') {
      this.$nextTick(() => {
        this.chart.resize();
      });
    }
  }
}

3. 或者也可以监听tabs的点击切换事件

<template>
  <el-tabs @tab-click="handleClick">
        <el-tab-pane label="个人练习情况" name="first">
          <RiskIdentificationStatisticsPerson></RiskIdentificationStatisticsPerson>
        </el-tab-pane>
        <el-tab-pane label="单位练习情况" name="second">
          <RiskIdentificationStatisticsCompany></RiskIdentificationStatisticsCompany>
        </el-tab-pane>
  </el-tabs>
</template>

 methods: {
  initEcharts() { 
    this.chart = this.echarts.init  (document.getElementById('chart'));
    this.chart.setOption({
      // ECharts 配置项
    });
  },
  handleClick(tab, event) {
    if (tab.name === 'second') {
      this.$nextTick(() => {
        this.initEcharts();
      });
    }
  }
}

结束啦！以后遇到问题再回来记录！