elementUI修改表头指定列

elementUI如何修改表头的某一列样式？

今天碰到个需求，要在elementUI 的表格头上根据不同的列名称改变颜色。

如图所示：

实现方法

1
2
//调用headerRowStyle方法

定义headerRowStyle方法

1
2
3
4
5
6
7
8
9
10
11
12
headerRowStyle(obj){
    //根据列的标签名来指定修改
       if(obj.column.label=="日期"){ 
         return 'color: #fff;background:#00bfbf'
       }
       if(obj.column.label=="姓名"){
         return 'color: #fff;background:#ffd454'
       }
       if(obj.column.label=="地址") {
         return headerRowStyle(obj){
    //根据列的标签名来指定修改
       if(obj.column.label=="日期"){ 
         return 'color: #fff;background:#00bfbf'
       }
       if(obj.column.label=="姓名"){
         return 'color: #fff;background:#ffd454'
       }
       if(obj.column.label=="地址") {
         return 'color:#00ffff'
       }
     }

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77










笔记
#elementUI
elementUI修改表头指定列
https://evanyangtobegreatest.github.io/2022/05/13/elementUI修改表头指定列/
作者
Evan
发布于
2022年5月13日
许可协议