el-table单元格样式更改

前几天遇到一个关于el-table表格样式的问题一直没解决 字体

由于在el-table-column加样式并不生效因此更改起来比较麻烦spa

后来了看来element官方文档和在一些关于此方面的博客,使用了一个比较笨的方法解决了问题code

问题以下:我想要未开药品的字段的样式为灰色blog

 

 

 

 效果以下element

 

 

 解决方案以下:文档

首先在el-table中加入cell-style博客

 <el-table  :cell-style="set_cell_style" >

对于cell-style官方文档解释以下console

 

 

 而后在method方法中写上方法table

 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的前后顺序有关,越先定义优先级越高,因此这里定义的顺序挺重要的。class

虽然这种方法有点笨但最后仍是可以解决问题的,不知道有没有更好的方法。

相关文章
相关标签/搜索