要素 UI コンポーネント テーブルはセルの下部の水平線を削除し、ラベルの背景色を設定します

コンポーネントのスタイルを直接変更しても反映されない場合があるため、最初にコンポーネントのスタイルを貫通して外部に 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>

 

 

おすすめ

転載: blog.csdn.net/u014288878/article/details/132231471