解决el-table表格底部的白色横线
在el-table所在的组件中添加这个样式即可。
/deep/ .el-table::before{
background-color:transparent;
}
el-tabs标签页进行切换时的echarts渲染问题
在使用el-tabs进行切换时,没有选中的页面不会被渲染,如果echarts图在这些未被渲染的页面中,echarts 无法准确获取到其容器的尺寸,宽高则会变成100px*100px。
- 最简单的办法就是给echarts图表固定高度,这样即使页面未被渲染图表的宽高也已经有了固定的尺寸。
.echarts {
width: 600px; /* 或任何适合的宽度 */
height: 400px;
}
- 使用 echarts 提供的的 resize() 方法
methods: {
handleTabChange(tab, event) {
if (tab.name === 'tab2') {
this.$nextTick(() => {
this.chart.resize();
});
}
}
}
- 或者也可以监听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();
});
}
}
}
结束啦!以后遇到问题再回来记录!