前言 vue + element ui 已经成很多后台管理的选择框架，Table 表格也是最常用的组件之一
问题：
- 后台管理系统需要很多table 的展示，有时候需要对table某一列或者某一项进行不同的颜色展示进行区别
解决办法：cell-style、header-cell-style
第一步：el-table绑定 cell-style、header-cell-style
-
header-cell-style：是控制tabel标题头样式的 -
cell-style：是控制tabel 数据样式的
<el-table
:data="tableData"
height="100%"
border
style="width: 100%"
:cell-style="timeStyle"
:header-cell-style="headStyle"
>
<el-table-column
align="center"
fixed
prop="date"
label="日期"
width="100"
>
</el-table-column>
</el-table>
第二步：定义data数据
data() {
return {
tableNav: [{
id: "g_lprf",
label: "粤教版",
color: "#99f4b7",
}, {
id: "g_lprf_ch",
label: "变化量",
color: "#99f4b7",
}, {
id: "g_rprf",
label: "人教版",
color: "#98ddfc",
}, {
id: "g_rprf_ch",
label: "变化量",
color: "#98ddfc",
} ],
tableData: [
{
date: "2020-04-15",
g_lprf: "-0.28",
g_lprf_ch: null,
g_rprf: "-0.93",
g_rprf_ch: null,
}, {
date: "最大值",
g_lprf: "-0.28",
g_lprf_ch: null,
g_rprf: "-0.93",
g_rprf_ch: null,
},{
date: "最小值",
g_lprf: "-0.28",
g_lprf_ch: "0.00",
g_rprf: "-0.93",
g_rprf_ch: "0.00",
},
],
};
},
第三步：定义cell-style、header-cell-style方法
methods: {
headStyle({ row, column, rowIndex, columnIndex }) {
let obj = this.tableNav.find((val) => val.id === column.property);
return `background-color: ${
obj ? obj.color + " !important" : "#f7f8fa !important"
}; color:#000 !important`;
},
timeStyle({ row, column, rowIndex, columnIndex }) {
let obj = this.tableNav.find((val) => val.id === column.property);
return `background-color: ${obj ? obj.color + "80" : "#fff"}; color:#000`;
},
}
table 效果
注释：
-
cell-style、header-cell-style不仅仅可以更改颜色背景色，也可以更改其他的style样式 ，这里只是做个举例， - 颜色我在数据中直接定死了，实际上，你也可以在data中单独定义。
gitee 地址
vue-question / element-tabel / table组件 / table样式（color）
