参考了element文档和其他博主的方法后亲测:
第一种:–el–table–style(推荐,可以透明)
css:
.el-table {
--el-table-border-color: transparent;
--el-table-border: none;
--el-table-text-color: white;
--el-table-header-text-color: white;
--el-table-row-hover-bg-color: transparent;
--el-table-current-row-bg-color: transparent;
--el-table-header-bg-color: transparent;
--el-table-bg-color: transparent;
--el-table-tr-bg-color: transparent;
--el-table-expanded-cell-bg-color: transparent;
@media (prefers-color-scheme: light) {
--el-table-text-color: #213547;
--el-table-header-text-color: #213547;
}
}
不需要定义class:“el-table”,css选择器可以自动识别".el-table";
第二种:row-style(一般推荐,简洁)
html:
<el-table :row-style="tablestyle" :header-cell-style=tablestyle :cell-style="tablestyle">
javascript:
const tablestyle = {
"background-color": "red",
"border": "none",
"color": "white",
};
此方案,缺陷是不能使用transparent设置背景色为透明;
其他方案:
">>>"深度穿透试了,没有成功;
"!important"关键字也试过了,也没有成功;
大家可以尝试尝试。