vue3 - 设置element plus table上的header-cell-class-name为什么没有生效?

Question

设置element plus table上的header-cell-class-name为什么没有生效?

<template><el-table :data="equipmentLedgerManagementData" border size="small" header-cell-class-name="table-header">        ...</templete><style> .table-header {    background-color: red;  }</style>

在webstorm中这个样式呈现灰色，说明它没有被使用。从页面显示上发现这个样式也没有生效，但是我将这段代码复制到element plus playground却生效了，这是为什么?该怎么解决?

Answer 1

样式权重问题，你这里放到playground的是加了important关键字，权重高，所以生效了。但是你本地使用的时候没有加，所以无效，所以你得提升样式权重，但是加important关键字不是一个好的提升权重的方式。个人建议提升权重如下:

.el-table th.el-table__cell.table-header {   background-color: red;}