前几天遇到一个关于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单元格样式更改的更多相关文章

  1. UITableViewCell 单元格样式

    UITableViewCell 单元格样式作用 typedef NS_ENUM(NSInteger, UITableViewCellStyle) { UITableViewCellStyleDefau ...

  2. poi的各种单元格样式以及一些常用的配置

    之前我做过一个poi到处excel数据的博客,但是,后面使用起来发现,导出的数据单元格样式都不对. 很多没有居中对齐,很多单元格的格式不对,还有就是单元格的大小不对,导致数据显示异常,虽然功能可以使用 ...

  3. 用NPOI创建Excel、合并单元格、设置单元格样式、边框的方法

    本篇文章小编为大家介绍,用NPOI创建Excel.合并单元格.设置单元格样式.边框的方法.需要的朋友参考下 今天在做项目中,遇到使用代码生成具有一定样式的Excel,找了很多资料,最后终于解决了,Ex ...

  4. 127使用 TableView 自带的单元格样式实现好友列表,另外在单元格中添加辅助按钮

    类似的做法如之前这篇随笔:114自定义UITableViewCell(扩展知识:为UITableViewCell添加动画效果) 相比之下:自定义 UITableViewCell 的内容灵活,可根据需求 ...

  5. 创建excel,合并单元格,设置单元格样式

    package com.huawei.excel; import java.io.File;import java.io.FileOutputStream;import java.util.Date; ...

  6. NPOI 生成Excel (单元格合并、设置单元格样式:字段,颜色、设置单元格为下拉框并限制输入值、设置单元格只能输入数字等)

    NPIO源码地址:https://github.com/tonyqus/npoi NPIO使用参考:源码中的 NPOITest项目 下面代码包括: 1.包含多个Sheet的Excel 2.单元格合并 ...

  7. Vue. 之 Element table 单元格内容隐藏

    Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...

  8. java POI Excel 单元格样式

    正如Html需要CSS一样,我们的POI生成的Excel同样需要样式才能更完美的表现我们的数据.下面还是从简单的例子出发,学习和了解POI的样式设计. 一.我的位置. 1 package com.my ...

  9. 给bootstrap table设置行列单元格样式

    1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...

随机推荐

  1. 使用analyze命令统计信息

    ① 搜集和删除索引.表和簇的统计信息② 验证表.索引和簇的结构③ 鉴定表和簇和行迁移和行链接针对analyze的搜集和删除统计信息功能而言Oracle推荐使用DBMS_STATS包来代替analyze ...

  2. vue---将json导出Excel的方法

    在做数据表格渲染的时候,经常遇到的需求的就是将导出excel,下面是使用vue进行项目数据进行导出的方法. 一.安装依赖 npm i -S file-saver npm i -S xlsx 二.在sr ...

  3. 利用c# 多屏显示

    公司搞了一个电视墙,要显示不同内容,于是买了一个多接口显卡(现在看来这个方案不是太好,但非常省钱) 要打开的就是几个网页,但要自己手工拖到不同电视上,非常麻烦 于是查了一下资料,发现可以用代码实现,说 ...

  4. ThinkPHP5中模型关联关系一对一,一对多

    TP5 返回json反斜杠前面转义了class XinDai extends Controller{ public function index(){ $res = [ ['logo'=>'/i ...

  5. springboot:非web启动

    需要运行一些调度任务,但是又不想放到web容器中运行. 见红色代码: import java.util.concurrent.ThreadPoolExecutor; import org.spring ...

  6. react 问题记录二(侧重于state或者说server层操作)

    项目体系说明:react+mobx+antd 11. state设置对象属性 this.setState({ tableParams:{tableName:value} }) 10.loading组件 ...

  7. 《深入理解Linux内核》 读书笔记

    深入理解Linux内核 读书笔记 一.概论 操作系统基本概念 多用户系统 允许多个用户登录系统,不同用户之间的有私有的空间 用户和组 每个用于属于一个组,组的权限和其他人的权限,和拥有者的权限不一样. ...

  8. [LeetCode] 622.Design Circular Queue 设计环形队列

    Design your implementation of the circular queue. The circular queue is a linear data structure in w ...

  9. 【Docker学习之三】Docker查找拉取镜像、启动容器、容器使用

    环境 docker-ce-19.03.1-3.el7.x86_64 CentOS 7 一.查找.拉取镜像.启动容器1.查找镜像-docker search默认查找Docker Hub上的镜像,举例:D ...

  10. activiti学习4:流程文件的部署

    activiti学习4:流程文件的部署 用bpmn规范定义好一个流程得到流程定义文件后,需要把该文件部署到activiti的数据库后,这个流程才可以使用. activiti中和流程定义相关的操作都需要 ...