コンポーネントのスタイルを直接変更しても反映されない場合があるため、最初にコンポーネントのスタイルを貫通して外部に div を追加する必要があります。
<div class="custom-table">
<el-table>
</el-table>
</div>
css:
// 設置label的背景色
.custom-table ::v-deep .el-table th {
background: var(--cool-gray-50, #F9FAFB);
border-bottom: none;
}
// 取消行之间的横向边框线
.custom-table ::v-deep .el-table td, .el-table th.is-leaf {
border-bottom: none;
}
//去掉最下面的那一条线
.custom-table ::v-deep .el-table::before {
height: 0px;
}
オリジナルエフェクト
修正後の効果
余談:
Eye open icon: Eye fill · Bootstrap icon library (bootcss.com)
目を閉じたアイコン:目のスラッシュ塗りつぶし · Bootstrap アイコン ライブラリ (bootcss.com)
場合によっては背景色の問題も発生します
対応するコンポーネントに透明色を設定するだけです
<el-tag style="background-color: #0000;border-color: #0000;">
<svg></svg>
</el-tag>