最近在把所有的项目从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;
}
}