vue3 + element-plus 修改 el-table 鼠標(biāo)懸停背景、斑馬紋顏色、表頭顏色

https://element-plus.org/zh-CN/component/table.html
在官網(wǎng)這里,也沒顯示鼠標(biāo)懸停時的色彩設(shè)置,所以這里做個記錄

.el-table {
    // 表格邊框的顏色,可以通過這個變量來設(shè)置表格的邊框顏色。
    --el-table-border-color: var(--el-border-color-lighter);
    // 表格邊框的樣式,一般為實線或虛線,可以通過這個變量來設(shè)置表格的邊框樣式。
    --el-table-border: 1px solid var(--el-table-border-color);
    // 表格中文字的顏色,可以通過這個變量來設(shè)置表格中文字的顏色。
    --el-table-text-color: var(--el-text-color-regular);
    // 表頭中文字的顏色,可以通過這個變量來設(shè)置表頭中文字的顏色。
    --el-table-header-text-color: var(--el-text-color-secondary);
    // 鼠標(biāo)懸停在行上時的背景色,可以通過這個變量來設(shè)置鼠標(biāo)懸停時行的背景色。
    --el-table-row-hover-bg-color: var(--el-fill-color-light);
    // 當(dāng)前行的背景色,可以通過這個變量來設(shè)置當(dāng)前行的背景色。
    --el-table-current-row-bg-color: var(--el-fill-color-light);
    // 表頭的背景色,可以通過這個變量來設(shè)置表頭的背景色。
    --el-table-header-bg-color: var(--el-bg-color);
    // 固定列的陰影樣式,可以通過這個變量來設(shè)置固定列的陰影樣式。
    --el-table-fixed-box-shadow: var(--el-box-shadow-light);
    // 表格的背景色,可以通過這個變量來設(shè)置表格的背景色。
    --el-table-bg-color: var(--el-fill-color-blank);
    // 表格行的背景色,可以通過這個變量來設(shè)置表格行的背景色。
    --el-table-tr-bg-color: var(--el-fill-color-blank);
    // 展開行的背景色,可以通過這個變量來設(shè)置展開行的背景色。
    --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
    // 左側(cè)固定列的陰影樣式,可以通過這個變量來設(shè)置左側(cè)固定列的陰影樣式。
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    // 右側(cè)固定列的陰影樣式,可以通過這個變量來設(shè)置右側(cè)固定列的陰影樣式。
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容