当前位置: 首页 > news >正文

js遍历数组将数组中属性名相同的属性值组成新的数组再转化成字符串并换行(js换行和html换行不同)

           {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;
}

http://www.lryc.cn/news/342283.html

相关文章:

  • Ai绘画|如何安装使用秋叶comfyui整合包,手把手详细教程
  • 【React】React-redux多组件间的状态传递
  • XSS-Labs 靶场通过解析(上)
  • 开源版本管理系统的搭建一:SVN服务端安装
  • Fastfetch一个类似neofetch的系统信息工具软件
  • DV试验和PV试验介绍
  • RTT PIN设备学习
  • Spring Boot面试知识点总结(经典15问)
  • 安卓手机原生运行 ARM Ubuntu 24.04 桌面版(一)
  • AHB---数据总线
  • 「51媒体」企业单位新闻稿件考核,怎么发布
  • 「 网络安全常用术语解读 」SBOM主流格式CycloneDX详解
  • React 之 内置标签<Fragment> (<>...</>) (十一)
  • Mac M1 解决安装grpcio不可用
  • Linux第三节--常见的指令介绍集合(持续更新中)
  • SpringMVC简介和体验
  • Android单行字符串末尾省略号加icon,图标可点击
  • 山东省文史书画研究会成立20周年系列活动徽标征集胜选名单公布
  • 相机2:曝光三要素之ISO(感光度)
  • 已解决java.util.IllegalFormatConversionException异常的正确解决方法,亲测有效!!!
  • OpenCV 库来捕获和处理视频输入和相似度测量(73)
  • 了解TMS运输管理系统,实现物流高效运转
  • 数据库原理与应用实验三 嵌套查询
  • LeetCode 110.平衡二叉树(Java/C/Python3/Go实现含注释说明,Easy)
  • 【SQL】ACID事务与隔离级别
  • 深度神经网络中的不确定性研究综述
  • 实用的Chrome浏览器命令
  • 无人作业控制器--4G/5G通信
  • 动态规划-两个数组的dp问题2
  • 如何设置并行度 ——《OceanBase 并行执行》系列 2