Vue使用ElementUI动态修改table单元格背景颜色或文本颜色

╰半橙微兮° 2023-09-24 00:19 159阅读 0赞

## 前言 ##

今天遇到一个场景，表格行属性的字典项要针对不同的状态，展示不同的文本颜色，如下图所示：

> 账号状态这一栏，如果是正常就展示以绿色字体展示，如果是禁用就以红色颜色展示

![在这里插入图片描述][d0ea3100acac4f9fa683d556da9252e6.png]

针对这个需求，我第一时间也是想到使用ElementUI提供给table的一个属性：cell-style

官方是这么说明的：

![在这里插入图片描述][a2e304b5b2fc4a05b095dc1c9b04645e.png]

简单说明就是，我们给需要修饰的table一个cell-style属性，它的值是一个回调函数，我们可以在回调函数里面进行逻辑处理，增加style样式

它的回调函数又四个参数，格式如下：

Function({
        row, column, rowIndex, columnIndex})/Object

我实现我这个需求只用到了前两个参数，下面进行代码演示。

## 给table增加cell-style属性 ##

首先给table增加cell-style属性

<el-table  :data="userTableData"  highlight-current-row  border  stripe fit :cell-style="cellStyle"  >

![在这里插入图片描述][361a4d3e5e23429da99329c538036c11.png]

## 修改一行颜色 ##

如果想要一行都变成返回的style样式，可以这么写：

> 这里的颜色不止支持颜色编码，而且支持颜色的单词

![b20f0271f76547908f863979055bd9c2.png][]

这样一行都是逻辑返回的样式了

![在这里插入图片描述][fe528a2dbdba4cd582cc1ce37e6c068c.png]

> 可以支持多个样式,类似于style行内样式的写法，比如：

![在这里插入图片描述][48a9c5667fc543ea8271bbfd3a85a92a.png]

![在这里插入图片描述][1b3982f580fc4fd282d5595e16b97fe7.png]

但是这明显不符合我的需求，我的需求是只让账号状态进行文本修饰，而不是一整行，所以需要使用下面这种。

## 只修改某个属性颜色 ##

如果不想让一行都根据返回的style修饰

我们可以借助column获取全部的行，然后某一行的lable属性，用它进行处理，比如这里我只想让账号状态被返回的style修饰，就可以这么写：

![在这里插入图片描述][6b871a300b394cecaa8e870f49055c9a.png]

相关代码如下：

//改变表格某一列或者某一个单元格文本颜色 
        cellStyle({
        row, column, rowIndex, columnIndex}) {
        
          // 定义样式变量
          let cellStyle;
          // 根据每一行的status属性的值进行判断
          // 如果是正常就展示以绿色字体展示，如果是禁用就以红色颜色展示
          switch(row.status) {
        
            // 0代表正常
              case 0:
                // 设置文本颜色 绿色 可以直接写颜色编码，也可以直接写颜色的单词
                cellStyle = 'color:#70DB93';
                break;
                // 0代表金禁用
              case 1:
                // 设置文本颜色 红色
                cellStyle = 'color:red';
                break;
                // 如果有其他状态，就默认显示，不给文本颜色
              default:
              cellStyle = '';
          }
            
            //return cellStyle  // 返回最终处理过的样式 这样写就是让全部行被style修饰
            // 返回最终处理过的样式 只让账号状态这个属性的属性被style修饰
             if(column.label == '账号状态'){
        
              return cellStyle
            }
        },

这样就满足了我的需求：

![在这里插入图片描述][0d1282fbf87f4dd0be390d6b6aa616d7.png]

## 总结 ##

作为一个后端人员，可能描述的不太准确，大家参考的思路即可。希望可以帮助到大家！

[d0ea3100acac4f9fa683d556da9252e6.png]: https://img-blog.csdnimg.cn/d0ea3100acac4f9fa683d556da9252e6.png
[a2e304b5b2fc4a05b095dc1c9b04645e.png]: https://img-blog.csdnimg.cn/a2e304b5b2fc4a05b095dc1c9b04645e.png
[361a4d3e5e23429da99329c538036c11.png]: https://img-blog.csdnimg.cn/361a4d3e5e23429da99329c538036c11.png
[b20f0271f76547908f863979055bd9c2.png]: https://img-blog.csdnimg.cn/b20f0271f76547908f863979055bd9c2.png
[fe528a2dbdba4cd582cc1ce37e6c068c.png]: https://img-blog.csdnimg.cn/fe528a2dbdba4cd582cc1ce37e6c068c.png
[48a9c5667fc543ea8271bbfd3a85a92a.png]: https://img-blog.csdnimg.cn/48a9c5667fc543ea8271bbfd3a85a92a.png
[1b3982f580fc4fd282d5595e16b97fe7.png]: https://img-blog.csdnimg.cn/1b3982f580fc4fd282d5595e16b97fe7.png
[6b871a300b394cecaa8e870f49055c9a.png]: https://img-blog.csdnimg.cn/6b871a300b394cecaa8e870f49055c9a.png
[0d1282fbf87f4dd0be390d6b6aa616d7.png]: https://img-blog.csdnimg.cn/0d1282fbf87f4dd0be390d6b6aa616d7.png