关于使用elementUI、v-chart开发后台中遇到的问题集合

最近入职新公司，接手的是phper用vue的element-admin和v-chart快速开发的一个物联网管理后台，代码暴力直接，很多模块都没有用到组件化，直接照搬了demo的实例修改，这就无意间增加了我接手的难度，所以趁还有记忆，记录一下自己遇到的坑。

一、数据过滤优化

前端最常做的就是对后台返回的数据做过滤和整合，那么对于那种对象与数组间关联的数据处理，我们经常会套用一层又一层的循环来达到目的，很显然这不利于性能优化。比如有一下需求，前端本身存在一个数组，内容是对象，我们需要根据后台返回的数据进行判断，动态地删除数组中的元素。
数据如下：

//这是前端本身的数组
colunms=[
{value:'hello',text:'你好'},
{value:'world',text:'世界'},
{value:'today',text:'今日'},
]
//这是后端传来的数据
data={
hello:'',
world:'has'
today:'has'
}

当我们需要根据后端的数据来增删数组时，可以利用Array.from方法配合forEach来实现：（比如需要把后端数据为空的字段，对应在colunms列表中删除调时，可以这样做）

Array.from(colunms).forEach((record,index) =>{
if(data[record.value] === ''){
	colunms.splice(index,1)
}
})

这样就完成了根据对象data的属性值来删除对应列表中的元素了。forEach本身接收一个回调函数，回调函数的参数自带了record(遍历的元素)，index(被遍历的元素索引)，利用这两个参数和对象data的对应关系就可以巧妙完成需求，不用套多层遍历循环。

二、v-chart图表切换无法渲染

v-chart本身是自渲染前计算好可视区的宽高再生成canvas图表的，那么一旦我们用了Element的tab卡来控制不同图表的显示时，很可能会出现只有第一个图表有内容，第二个图表切换过去时，及时没报错，也没显示内容，这很可能时宽、高获取失败导致的。

针对这种情况，再github的issue上找到了办法，沿用e-chart的方法重绘图表，v-chart也封装了这个方法进去，但是文档并没有提示。

//假设我们没有加载出来的图表组件是这个，那么我就需要用ref获取它
<ve-pie 
	ref="chart_tr"
   	:loading="isLoading"
    :data="chartData_tr"
    :extend="expandData"
    :settings="chartSettings_tr"></ve-pie>
<script>
	export default:{
		methods: {
			reset(){
				//在需要重新渲染的地方，调用以下的方法，这里只是做个举例
				this.$refs.chart_tr.echarts.resize();
			}
	}
}
</script>

三、关于自定义Element的样式

很多时候，UI设计给的图和element本身的样式风格不太一样，我们需要自定义时，一般情况下我们在chrome里面调F12查看相关样式，然后在组件中的style里通过定义scoped，然后复制相关的类名下来进行重写，但未必一定生效。

那么这时候，很可能需要把scoped去掉，然后把没有改动的，原本存在的样式也复制下来，只在上面增加自己自定义的样式，用!important提高全权重，这样基本能暴力怼掉80%的element自带样式

后续继续补充…