{
label: '告警结果',
display:true,
html:true,
formatter:(row)=>{
let list =""
if(row.funRes&&row.funRes.length){
let propName = 'value';
list= row.funRes.map(obj => {
return `<span style="vertical-align: text-top;padding-right: 2px;"><img style="width: 18px;height:18px"
src="${obj[propName] ==0?'/img/newpic/icon-green.png'
:obj[propName] ==-1?'/img/newpic/icon-yellow.png'
:obj[propName] ==1?'/img/newpic/icon-red.png':
obj[propName] ==2?'/img/newpic/noValue.png':""}"></span><span>${obj[propName] ==0?'正常':obj[propName]==-1?'未识别':obj[propName] ==1?'异常':obj[propName] ==2?'无阈值':'--'}</span>`
})
}
return list&&list.length?list.join('\n'):""
}
},
如上会得到这种效果
其中row.funRes就是要遍历的数组
value是要找数组中的所有属性名为value的属性值组合成数组
再使用.join转化成字符串原本使用逗号隔开但是这个使用\n去换行(这里的换行是js的换行 也就是在页面中展示时候并没有换行)
于是需要检查元素 在这个元素中使用css去换行
/deep/.el-table .cell{
white-space: pre-line;
}