自定义element-ui的table字体颜色,及背景色
遇到一个需要根据报警级别来区分table数据的需求,一开始的想法是改变字体颜色,看了下ele文档,有个cell-style的属性,可以通过回调,返回样式。感觉so easy
那就来吧,直接上代码
界面部分
<template><div class="app-container"><div class="filter-container" ><el-button class="filter-item" type="success" >全部处理</el-button></div><el-table :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange" :cell-style="cellStyle" border fit highlight-current-row><el-table-column type="selection" width="55" :selectable="isDisabled"></el-table-column><el-table-column label="确认" align="center" width="80"><template slot-scope="scope"><el-button type="success" size="mini" :disabled="scope.row.confirm" @click="confirmHandle(scope.row.pointId)"> {{scope.row.confirm?'已确认':'确认'}}</el-button></template></el-table-column><el-table-column label="详情" align="center" width="80"><template slot-scope="scope"><el-button type="primary" size="mini" >详情</el-button></template></el-table-column><el-table-column prop="alarmLevel" label="告警级别" align="center" show-overflow-tooltip></el-table-column><el-table-column prop="area" label="区域" align="center"></el-table-column><el-table-column prop="equip" label="设备" align="center" show-overflow-tooltip></el-table-column><el-table-column prop="pointName" label="测点" align="center" show-overflow-tooltip></el-table-column><el-table-column prop="limit" label="限值" align="center" show-overflow-tooltip></el-table-column><el-table-column prop="alarmValue" label="报警值" align="center" show-overflow-tooltip></el-table-column><el-table-column prop="alarmTime" label="报警时间" align="center" show-overflow-tooltip></el-table-column></el-table></div>
</template>
js部分
<script>export default {data() {return {//初始数据变量tableData: [{confirm:true,alarmLevel:"紧急告警",area:"北京市昌平区",equip:"昌平气象采集",pointId:1,pointName:"温度",limit:"35",alarmValue:"41",alarmTime:"2019-6-1 12:00:00",},{confirm:false,alarmLevel:"一般告警",area:"北京市朝阳区",equip:"昌平光感采集",pointId:2,pointName:"紫外线",limit:"60",alarmValue:"61",alarmTime:"2019-6-1 12:00:00",},{confirm:false,alarmLevel:"紧急告警",area:"北京市朝阳区",equip:"昌平光感采集",pointId:3,pointName:"紫外线",limit:"60",alarmValue:"61",alarmTime:"2019-6-1 12:00:00",}],multipleSelection: []}},methods: {handleSelectionChange(val) {//复选框选中操作console.log(val);},cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色// console.log(row);// console.log(row.column);if(row.column.label==="告警级别"&& row.row.alarmLevel==="紧急告警"){return 'color:red'}else if(row.column.label==="告警级别"&& row.row.alarmLevel==="一般告警" ){return 'color:yellow'}}}}
</script>
完成后的界面是这样婶的,感觉完全ok
后来一看字体不太清楚啊,加上颜色,盯了几秒,感觉近视又加深了啊,哈,那就换个思路,我就想试着让一行数据变背景色,只需要修改cellstyle方法中的if判断就可以了
cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色// console.log(row);// console.log(row.column);if(row.row.alarmLevel==="紧急告警"){return 'background:red'}else if(row.row.alarmLevel==="一般告警" ){return 'background:yellow'}}
修改后的界面是这样婶的,没错,你没看错就这么高调,我要被亮瞎了
行吧,为了不被打死,那就缩小范围,只高亮报警级别这一项,继续修改if
cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色// console.log(row);// console.log(row.column);if(row.column.label==="告警级别"&& row.row.alarmLevel==="紧急告警"){return 'background:red'}else if(row.column.label==="告警级别"&& row.row.alarmLevel==="一般告警" ){return 'background:yellow'}}
完事,是这样婶的
嗯,不愧是我写的页面,一如既往地亮眼,没有ui果然是件很蛋疼的事啊,至此功能最起码实现了
小弟刚学vue+ele,有问题的地方欢迎大佬们随时指正,告辞
自定义element-ui的table字体颜色,及背景色相关推荐
- Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
- Element UI 之table表格表头过长使用点点…显示,并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示 需求 鼠标移入表头 关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
- element UI 修改表格边框颜色
element UI 修改表格边框颜色 由于我只想要改变该页面的表格边框颜色,加上表格类名 /** 改变边框颜色*/.right-content .el-table--border, .el-tabl ...
- Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
- CKEditor5 功能追加,自定义设置:段落对齐,字体颜色,背景色,字体大小等配置添加
CKEditor5 功能追加 CKEditor5的安装详见官网: https://ckeditor.com/ckeditor-5/demo/ 如上图所示:ckeditor5只默认了字体加粗,斜体,加入 ...
- 改变MFC对话框背景色、控件内的字体颜色和背景色
原文转自http://www.rosoo.net/a/201408/17018.html C 设置 Dialog, Group Box, Static Text, Check Box, Edit Ct ...
- 自定义Element ui中el-upload上传后的文件图标
实现功能:上传图标显示图片图标,上传文件显示文档图标,上传视频显示视频图标 首先想到的是去Element UI 查看有没有自定义的功能,后面发现底层源码写死的,那就不能自定义,就只能通过js操作了,我 ...
- Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
- element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
最新文章
- UIImageView动画
- Swift - 17 - 数组的初始化
- S/4HANA表现抢眼——第一季度SAP大中华区营收再现双位数增长
- hdu 3579(中国剩余定理非互质)
- 使用Jest进行单元测试
- [Hnoi2006]马步距离
- 【超直白】算法:斐波那契数列
- Level-IP(Linux userspace TCP/IP stack)
- 用于制作app store的截图的工具:Brief Wrapper —— 最便捷的应用商店屏幕快照
- Linux命令行下WEP密码破解(通用,也可非BT平台)
- ASO积分墙优化,差点毁了我家产品
- 知识图谱下图神经网络、图计算、图数据、图数据库未来发展趋势如何?
- 液晶显示技术 TCON介绍
- ​电子投票系统与区块链
- 视觉Prompt新方法:超越所有微调方法,参数量大幅减少
- 文本框固定任意一顶点后,拖动相对点任意旋转缩放,计算缩放后顶点坐标
- Android键盘自定义表情包,关于自定义表情键盘...
- 在html页面中引入jquery
- 二、如何写好学术/学位论文
- 大型医院信息系统HIS源码 HIS系统全套源码
热门文章
- 斐讯K2刷breed加刷老毛子华硕系统,救砖以及修复弱信号故障
- 转 安卓Android系统超级终端命令行大全 超详细介绍(六、七、八、九..)
- java自学网站推荐,一文搞懂
- 51单片机最完美数码管驱动,仿真无缺显,实物无鬼影,最高亮度无黯淡.
- RHCE第四天:给OPENLAB搭建web网站
- 图章制作软件测试自学,【Monci小分享】用houdini快速制作高质量浮雕模型
- 程序设计比赛知识总结
- 快车蜘蛛池站群程序 v2.0
- 文献管理与信息分析笔记+技巧
- 分享一个在线听音乐的秘密花园