vue+View UI 的table 数据和标准值对比后加上下箭头

最近在把所有的项目从jq+bootstrap 移入到vue+View UI上，在表格加跟标准值加上下图标，各种百度以后终于成功了，作为小白一个也踏了蛮多坑o(╥﹏╥)o，虽然可能不是最佳方案，但是希望我踩过的坑其他的小白不要在踩一遍了

template 中

<template>
  <div>
  	 <Table :columns="columns" :data="data"></Table>
  </div>
</template>

data中

data() {
    return {
    	columns: [{
                key: 'contaminants',
                title: '猪脚',
                width: "120"　, //设置宽度
                fixed: 'left'
            },{
                key: 'standardValue',
                title: '标准值',
                width: "120",
                align: "center",
                fixed: 'left',
                render:(h, params) => {
                    return h("span",{
                        domProps:{innerHTML:this.operateFormatter(h,params)}
                    }) 
                }
            },{
                key: 'daguang',
                title: '大罐',
                width: "120",
                align: "center",
                render:(h, params) => {
                    return h("span",{
                        domProps:{innerHTML:this.operateFormatter(h,params)}
                    }) 
                }
            }, {
                key: 'huaining',
                title: '怀灵',
                width: "120",
                align: "center",
                render:(h, params) => {
                    return h("span",{
                        domProps:{innerHTML:this.operateFormatter(h,params)}
                    }) 
                }
            }, {
                key: 'yixiu',
                title: '一休',
                width: "120",
                align: "center",
                render:(h, params) => {
                    return h("span",{
                        domProps:{innerHTML:this.operateFormatter(h,params)}
                    }) 
                }
            }],
            data: [{
			            "contaminants": "秦始皇",
			            "standardValue": "3.99 0",
			            "daguang": "5.36 0" ,
			            "huaining": "2.23 0" ,
			            "yixiu": "3.99 0",
				},
				{
			            "contaminants": "唐太宗",
			            "standardValue": "3.99 0",
			            "daguang": "5.36 0" ,
			            "huaining": "2.23 0" ,
			            "yixiu": "3.99 0",
				}]
	}
},

methods中

methods: {
	operateFormatter(h,params) {
        let key=params.column.key;
        var rowArr = params.row[key].split(" ");
        if (Number(params.row.standardValue) - Number(rowArr[0]) > 0) {
            var value = this.compile("up");
            return (rowArr [0]+value);
        } else if (Number(params.row.standardValue) - Number(rowArr[0]) < 0) {
            var value = this.compile("down");
            return (rowArr [0]+value);
        } else if (Number(params.row.standardValue) - Number(rowArr[0]) == 0) {
            var value = this.compile("normal");
            return (rowArr [0]+value);
        } else {
            var value = this.compile("normal");
            return (rowArr [0]+value);
        }
    },
   compile(val) {
        var aa = '';
        switch (val) {
            case "up":
                aa = '<i class="fa fa-long-arrow-up" style="color:red;margin-left:6px" ></i>';
                break;
            case "down":
                aa = '<i class="fa fa-long-arrow-down" style="color:#1ed689;margin-left:6px" ></i>';
                break;
            case "normal":
                aa = '<i style="margin-left:6px">-</i>';
                break;
            default:
                break;
        }
        return aa;
    }
}

一个前端小白的发言，希望能对大家有帮助，有问题的小可爱也可以多多留言，一起成长~，不专业之处还望大神多多指点