el-table单元格样式更改
前几天遇到一个关于el-table表格样式的问题一直没解决
因为在el-table-column加样式并不生效所以更改起来比较麻烦
后来了看来element官方文档和在一些关于此方面的博客,使用了一个比较笨的方法解决了问题
问题如下:我想要未开药品的字段的样式为灰色

效果如下

解决方案如下:
首先在el-table中加入cell-style
<el-table :cell-style="set_cell_style" >
对于cell-style官方文档解释如下

然后在method方法中写上方法
set_cell_style({row, column, rowIndex, columnIndex}){
console.log(row,"row")
if (column.label === '时间'){
return 'color:black'
}
if (column.label === '序号'){
return 'color:black'
}
//这里的medicalCommonName指的是在el-table-column定义的prop中的值
if (row.medicalCommonName === '未开药品'){
return 'color:lightgray'
}
},
思路就是先让不需要改变的列字体变为黑色,因为第三个if会使得整行的字体变为灰色,所以要先把列变为黑色。这里的优先级跟if的先后顺序有关,越先定义优先级越高,所以这里定义的顺序挺重要的。
虽然这种方法有点笨但最后还是能够解决问题的,不知道有没有更好的方法。
el-table单元格样式更改的更多相关文章
- UITableViewCell 单元格样式
UITableViewCell 单元格样式作用 typedef NS_ENUM(NSInteger, UITableViewCellStyle) { UITableViewCellStyleDefau ...
- poi的各种单元格样式以及一些常用的配置
之前我做过一个poi到处excel数据的博客,但是,后面使用起来发现,导出的数据单元格样式都不对. 很多没有居中对齐,很多单元格的格式不对,还有就是单元格的大小不对,导致数据显示异常,虽然功能可以使用 ...
- 用NPOI创建Excel、合并单元格、设置单元格样式、边框的方法
本篇文章小编为大家介绍,用NPOI创建Excel.合并单元格.设置单元格样式.边框的方法.需要的朋友参考下 今天在做项目中,遇到使用代码生成具有一定样式的Excel,找了很多资料,最后终于解决了,Ex ...
- 127使用 TableView 自带的单元格样式实现好友列表,另外在单元格中添加辅助按钮
类似的做法如之前这篇随笔:114自定义UITableViewCell(扩展知识:为UITableViewCell添加动画效果) 相比之下:自定义 UITableViewCell 的内容灵活,可根据需求 ...
- 创建excel,合并单元格,设置单元格样式
package com.huawei.excel; import java.io.File;import java.io.FileOutputStream;import java.util.Date; ...
- NPOI 生成Excel (单元格合并、设置单元格样式:字段,颜色、设置单元格为下拉框并限制输入值、设置单元格只能输入数字等)
NPIO源码地址:https://github.com/tonyqus/npoi NPIO使用参考:源码中的 NPOITest项目 下面代码包括: 1.包含多个Sheet的Excel 2.单元格合并 ...
- Vue. 之 Element table 单元格内容隐藏
Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...
- java POI Excel 单元格样式
正如Html需要CSS一样,我们的POI生成的Excel同样需要样式才能更完美的表现我们的数据.下面还是从简单的例子出发,学习和了解POI的样式设计. 一.我的位置. 1 package com.my ...
- 给bootstrap table设置行列单元格样式
1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...
随机推荐
- Unity制作地形的常用插件之GAIA
用Unity制作大型游戏少了地形制作怎么行,用原生的Unity工具制作地形效率较低而且也不甚美观,后期运行的效率也得不到保证.下面推荐的专业地形制作工具可以帮助开发者解决地形制作的相关问题. 打开Un ...
- pyzbar 安装
什么是ZBar? ZBar是一个开源库,用于扫描.读取二维码和条形码.支持的二维码包括:EAN/UPC,QR等. 1.windows 下直接pip 安装: pip install pyzbar 2.u ...
- mapdb的适用场景介绍
对于大部分系统来说,mapdb并无太大价值,而且增加了成本.但是如果一级缓存巨大例如数以十GB级别,或占据了整个JVM的1/2以上,mapdb的价值就会体现出来.正如其官网介绍: MapDB prov ...
- webpack的带表达式require和require.context()方法
带表达式的 require 语句如果 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入 ...
- 24V低压检测电路 - 低压检测电压(转)
24V低压检测电路 - 低压检测电压 参考: ADC采样工作原理详解 使用单片机的ADC采集电阻的分压 问题: 当ADC采集两个电阻分压后的电压的时候,ADC转换出来的电压值和万用表量出来的不一样差异 ...
- Android Studio运行Hello World程序
老的神舟本本装上了深度LINUX了...应该是基于ubuntu的,安装软件用的apt-get而不是yum 想重装学下android原生开发,官网下载了android studio, 发现不用FQ也能下 ...
- leetcode No.500 键盘行 keyboard-row (Python3实现)
题目描述 给定一个单词列表,只返回可以使用在键盘同一行的字母打印出来的单词.键盘如下图所示. 示例: 输入: ["Hello", "Alaska", " ...
- delphi uniDac
Delphi 2010安装及使用UniDAC 4.0 UniDAC是一个功能强大的非可视化跨数据库的数据访问组件,可用于Delphi,Delphi for .NET,C++Builder,and La ...
- Kubernetes集群中Jmeter对公司演示的压力测试
6分钟阅读 背景 压力测试是评估Web应用程序性能的有效方法.此外,越来越多的Web应用程序被分解为几个微服务,每个微服务的性能可能会有所不同,因为有些是计算密集型的,而有些是IO密集型的. 基于微服 ...
- 异常处理和UDP Socket套接字
一.异常处理 1.什么是异常处理: 程序在运行过程中出现了不可预知的错误,并且该错误没有对应的处理机制,那么就会以异常的形式表达出来,造成的影响就是整个程序无法再正常进行. 2.异常的结构: 1.异常 ...