vue项目优化

1、项目中好多地方展示金额和百分比，而接口返回的数据需要进一步转化才能使用,如果数据量较少，可以挨个转换，但是考虑到扩展性和复用性，决定使用过滤器

// 原项目写法：
this.rightTopMessages[0].count = (res.data.yearContractCompleteAmount / 10000).toFixed(0) + 'W'// 总合同额
this.rightTopMessages[0].percent = '没值'// 总合同额-同比上涨
this.rightTopMessages[1].count = (res.data.monthContractCompleteAmount / 10000).toFixed(0) + 'W'// 本月合同额
this.rightTopMessages[1].percent = ((res.data.monthContractCompleteAmount - res.data.lastMonthContractCompleteAmount) / res.data.lastMonthContractCompleteAmount * 100).toFixed(0) + '%'// 本月合同额-同比上涨



// 优化后写法：
this.rightTopMessages[0].count = res.data.yearContractCompleteAmoun// 总合同额
this.rightTopMessages[0].percent = '没值'// 总合同额-同比上涨
this.rightTopMessages[1].count = res.data.monthContractCompleteAmount// 本月合同额
this.rightTopMessages[1].percent = (res.data.monthContractCompleteAmount - res.data.lastMonthContractCompleteAmount) / res.data.lastMonthContractCompleteAmount// 本月合同额-同比上涨

Vue.filter('transformNum',(value,type) => { //定义过滤器
	if(type==='1'){//type:需要转换的数值类型 1金额 2百分比
		return value+'w'
	}
	else if(type==='2'){
		return value+'%'
	}
	else{
		return value
	}
})

//使用过滤器
<div>{{item.count | transformNum(item.type)}}</div>

2、项目中的表格，需要固定列；如果只有一级表头，直接给列添加fixed：true；如果是多级表头，直接给父列添加fixed：true，表格样式错误

问题描述： 总计列含有3个二级表头（2018,2019,2020），给总结列添加fixed:true，拖动滚动条的时候，只有2018列固定住了，其他的一直滚动

问题截图：

解决办法：

给总计列添加一个宽度，这个宽度等于二级表头宽度的总和 我的项目里，每列设置150px就足够展示内容了，所有给一级表头总计列设置width:'450';给2018/2019/2020二级表头各设置width:'150'

3、下拉选项，初始值选择全部，1勾选其他选项，全部取消；2没有勾选任何选项时，自动勾选全部；3在勾选了其他值的情况下，勾选全部，全部选中，其他值取消勾选

handleBranchChange(val){//el-select监听change事件
    if (val[val.length - 1] == ''||val.length === 0) {
        this.formData.branchList=['']
    } else if (val[0] == '' && val[val.length - 1] !=='') {
        val.shift()
        this.formData.branchList=val
    }else{
        this.formData.branchList=val
    }
}