Vue3 调element样式的困难（el-table）

为了偷懒用element，结果又昏倒在调样式的阶段。。。。。。

这次为了实现固定【右侧操作栏】和【表头】，同时实现【表格属性】可以配置，偷懒用了<el-table>，逻辑写完之后，调样式真的太痛苦了！！！！！

1、表头背景色（::before那一块区域）：

.el-table :deep(th::before){
    background:rgba(3, 64, 120, 0.94);
    border-radius:2px 2px 0px 0px;
}

2、表头背景色+表头行下边框颜色：

:deep(.el-table th.el-table__cell.is-leaf) {
    background:rgba(3, 64, 120, 0.94);
    border-bottom:1px solid #20539f;
}

3、表头字体样式：

.el-table :deep(thead){
    font-family:Microsoft YaHei;
    color:rgba(206, 222, 255, 0.6);
    font-size:18px;
    line-height:48px;
}

4、表格body部分——每一行的背景色&字体样式：

.el-table :deep(tr){
    background:rgba(9, 42, 81, 0.82);
    font-family:Microsoft YaHei;
    color:#cedeff;
    font-size:18px;
    line-height:56px;
    --el-table-row-hover-bg-color: red!important;    //鼠标上移时行背景变色

}

5、表格body部分——的行与行之间的边：

.el-table :deep(td) {
    border-bottom:  1px solid #20539f;
 }

6、表格底层：

.el-table:deep(::before) {
    background: red;
    border-bottom:1px solid #20539f;
}

7、最右侧列固定，背景颜色样式调整：

:deep(.el-table__body-wrapper tr td.el-table-fixed-column--right) {
    z-index: 2;
    background: rgb(9 39 80);
}