element-ui如何自定义表格颜色

2019-05-09 分类：Vue 作者：huanggr 阅读（9817）

element-ui如何自定义表格颜色

element-ui是前端最炙手可热的ui框架之一，配合vue脚手架进行开发，功能十分的强大，接下来介绍一下，在element-ui中表格如何实现自定义颜色，和以往的html结果不同，element-ui中所使用的都是经过组件封装过的，这样就不能直接像传统的操作方式那样，直接操作dom（可以操作，但是很繁琐），其实，在element-ui框架中针对表格的操作提供了一些方法可供调用，以此来进行表格自定义颜色的控制，同时，我们也可以通过直接控制element-ui中表格的类名来直接对dom进行操作，接下来，就带大家进入一个实战：

如下图所示：

element-ui如何自定义表格颜色

这种效果就是使用element-ui中table组件制作的，下面讲解一下element-ui如何自定义表格颜色

首先上代码【完整的代码，就是那种可直接复制到脚手架页面打开看效果的那种喔！】：

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

<template>
<div class="table">
<el-table :data="tableData"
style="width: 100%;color: #49494a;"
ref="multipleTable"
:row-class-name="tableRowClassName"
:header-cell-style="getRowClass">
<el-table-column label=""
type="selection">

</el-table-column>

<el-table-column label="姓名">
<template slot-scope="scope">
<span>{{ scope.row.a }}</span>
</template>
</el-table-column>

<el-table-column label="性别">
<template slot-scope="scope">
<span>{{ scope.row.b }}</span>
</template>
</el-table-column>

<el-table-column label="年龄">
<template slot-scope="scope">
<span>{{ scope.row.g }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<span @click="See(scope.$index, scope.row)">查看报告</span>
<span class="status"
style="padding-left:25px;"
@click="Printing(scope.$index, scope.row)">打印报告</span>
</template>
</el-table-column>
</el-table>

</div>
</template>

<style>
.table {
width: 900px;
height: 400px;
margin: 100px auto;
}

/*更改表格颜色*/
.double {
background: #f6f6f6 !important;
}
.single {
background: #ccc !important;
}
</style>

<script>
export default {
name: '',
data () {
return {
tableData: [{
a: '张三',
b: '男',
g: '45',
}, {
a: '张三',
b: '男',
g: '45',
}, {
a: '张三',
b: '男',
g: '45',
}, {
a: '张三',
b: '男',
g: '45',
}, {
a: '张三',
b: '男',
g: '45',
}, {
a: '张三',
b: '男',
g: '45',
}, {
a: '张三',
b: '男',
g: '45',
}, {
a: '张三',
b: '男',
g: '45',
}],
} },
methods: {

tableRowClassName ({ row, rowIndex }) {
if ((rowIndex + 1) % 2 === 0) {
return 'double';
} else {
return 'single';
}
}, getRowClass ({ rowIndex }) {
if (rowIndex == 0) {
return 'background:#ebeaef'
} else {
return ''
}

},

}
}
</script>

element-ui如何自定义表格颜色其实非常的简单，细心的小伙伴可能已经发现了，这里面用到了两个方法，一个方法控制表格行的颜色。一个用来控制头部颜色，rowIndex的下标为0表示的就是第一个，这样就可以给第一个设置颜色了。
也就是：

element-ui如何自定义表格颜色-核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//控制行颜色
tableRowClassName ({ row, rowIndex }) {
if ((rowIndex + 1) % 2 === 0) {
return 'double'; //对应的类
} else {
return 'single'; //对应的类
}
},
//控制表格头部颜色
getRowClass ({ rowIndex }) {
if (rowIndex == 0) {
return 'background:#ebeaef'
} else {
return ''
}

/*更改表格颜色*/ 这里就是对应的CSS样式（类的样式）
.double {
background: #f6f6f6 !important;
}
.single {
background: #ccc !important;
}

值得注意的是因为层级问题，必须是要添加上important的，因为在element-ui框架中，样式的层级比较多，权重比较大，所以用element-ui将层级提升至最大才有效果，还需要注意的是，style样式里面是全局的不能出现scoped（表示的是只在当前主题样式有效），出现之后这个代码就会被element-ui的样式给替换掉，我估计应该是自己写的css代码先执行，然后element-ui的代码后执行，这样的话如果不是全局样式，就不会生效了，有的小伙伴又会问了，这样的话岂不是别的有表格的页面的表格颜色和现在的表格页面都一个样了，所以为了避免出现这种问题，这样我们就可以在当前页面新增一个独一无二的类名，然后在这个类名后使用样式。

如下所示代码：

1
2
3
4
5
6
7
8
9
10

//htm结构
<el-table class="table_color" :data="tableData">……</el-table>

//css样式
.table_bg .double {
background: #f6f6f6 !important;
}
.table_bg .single {
background: #ccc !important;
}

这样就完全避免冲突了。
上述完整代码也可以直接copy放到vue脚手架环境直接运行。

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

赞(40) 打赏

标签：