vue3 ElementPlus el-table根据表头内容,修改表头背景色
·
修改table表头背景用到的方法是ElementPlus自带的方法:header-cell-style
使用代码教程:
<el-table
:header-cell-style="tableHeaderColor"
border
:data="dataList"
>
<!-- header-cell-style修改table表头样式的,tableHeaderColor是写的回调函数,在回调函数里面修改表头样式 -->
</el-table>
回调函数使用:
// 根据data返回的每个单元格的数据判断,再修改单个表头单元格的颜色
function tableHeaderColor(data) {
if (data.column.property == "equip") {
return { background: "#a0cfff", color: "#000", textAlign: "center" };
} else if (
data.column.property == "value1" ||
data.column.property == "value2" ||
data.column.property == "name1"
) {
return { color: "#000", textAlign: "center" };
} else if (data.column.property == "value3") {
return { color: "#117ecc", textAlign: "center" };
}
}
修改效果图:

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)