el-table修改表格颜色

本文讲解vue修改el-table表格标题颜色。

以下代码从element组件官网进去，然后可以在线调试查看效果

本文讲解的一些属性及说明都能在element组件官网查看。

一、el-table属性修改表格颜色

1.1、header-row-class-name修改表头行颜色

header-row-class-name：修改el-table整个表头的颜色

<template><el-table:data="tableData"style="width: 100%"header-row-class-name="custom-class"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><style>.custom-class {color: red;}
</style><script>export default {methods: {},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}]}}}
</script>

在线查看效果：

如上图：整个表头的颜色都变了

1.2、header-row-style修改表头样式

header-row-style:修改表头样式。比如居中、背景色、字体大小等等。
更多内容可参考另一篇博文《element中el-table表头通过header-row-style设置样式》

<template><el-table:data="tableData"style="width: 100%":header-cell-style="tableHeaderStyle"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><style></style><script>export default {methods: {// 设置表头的颜色tableHeaderStyle({ row, column, rowIndex, columnIndex }) {if (rowIndex === 0 && columnIndex === 0) {return 'background-color: #afccfd; color:#000000;'; //蓝色} else if (rowIndex === 0 && columnIndex === 1) {return 'background-color: #c0e33c; color:#000000;';//绿色} else if (rowIndex === 0 && columnIndex === 2) {return 'background-color: #fbc57b; color:#000000;';//橙色} else {return 'color:#000000; background: #ffffff;';}}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}]}}}
</script>

效果图：

1.3、row-class-name修改行颜色

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

<template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
</style><script>export default {methods: {tableRowClassName({row, rowIndex}) {//rowIndex从0开始计算if (rowIndex === 0) {return 'warning-row';} else if (rowIndex === 2) {return 'success-row';}return '';}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}]}}}
</script>

在线调试效果：

二、el-table-column属性修改表格颜色

2.1、class-name修改整列的颜色

class-name属性修改整列颜色

<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"class-name="custom-class"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><style>.custom-class {color: red;}
</style><script>export default {methods: {},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}]}}}
</script>

在线查看效果：

如上图：日期整列颜色都变了，包含标题和内容。

2.2、label-class-name修改列标题颜色

label-class-name: 只修改列标题颜色，不修改整列颜色

<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"label-class-name="custom-class"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><style>.custom-class {color: red;}
</style><script>export default {methods: {},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}]}}}
</script>

在线查看效果：

如上图：只有标题的颜色变了

还有很多其他样式待后续补充。

创作不易，欢迎打赏，你的鼓励将是我创作的最大动力。