vue3 el-table 如何通過深度選擇器::v-deep修改組件內(nèi)部樣式(默認(rèn)樣式)
默認(rèn)的樣式:

修改的樣式:


CSS:
// 使用vue3的深度選擇器 ::v-deep(或者 :deep,::v-deep的別名),修改組件內(nèi)部樣式,從而改變組 件默認(rèn)的顯示效果
// 表格奇數(shù)行樣式
::v-deep .el-table .odd-row {
background-color: #ccffff;
}
// 表格偶數(shù)行樣式
:deep .el-table .even-row {
background-color: #9acdd6;
}
// 表格單元格樣式
::v-deep .el-table .el-table__cell {
// 行高(行空間)
padding: 2px 0; // 默認(rèn)值:padding: 8px 0;
}
// 表格(.el-table)、表格表頭單元格(.el-table th)、表格表體單元格(.el-table td)樣式,.el-table__cell相當(dāng)于.el-table th和.el-table td
::v-deep .el-table,
// ::v-deep .el-table th,
// ::v-deep .el-table td {
::v-deep .el-table .el-table__cell {
// 邊框
border: 1px solid #007ACC;
}
// 表格表頭樣式
:deep .el-table thead {
color: blue;
font-size: 14px;
}
// 表格表頭單元格樣式
::v-deep .el-table th {
background-color: skyblue;
}
// 表格表體樣式
::v-deep .el-table tbody {
color: black;
font-size: 14px;
}
// 表格行樣式
:deep .el-table tr {
background-color: pink;
}
// 表格單元格樣式,與 表格奇偶行背景顏色有沖突
// :deep .el-table td {
// background-color: hsl(240, 50%, 80%);
// }
// 表格當(dāng)前選擇行樣式,與 表格行樣式(:deep .el-table tr)有沖突
::v-deep .el-table__body tr.current-row > td {
background-color: hsla(240, 100%, 50%, 0.2);
}
// 表格無數(shù)據(jù)時的背景樣式
::v-deep .el-table__empty-block {
background-color: skyblue;
}
// 表格無數(shù)據(jù)時的字體樣式
:deep .el-table__empty-text {
color: red;
font-size: 18px;
}到此這篇關(guān)于vue3 el-table 通過深度選擇器::v-deep修改組件內(nèi)部樣式(默認(rèn)樣式)的文章就介紹到這了,更多相關(guān)vue3 el-table 修改組件內(nèi)部樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3?實現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法
- vue3+elementplus基于el-table-v2封裝公用table組件詳細(xì)代碼
- vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況
- Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法
- 解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題
- vue3插槽:el-table表頭插入tooltip及更換表格背景色方式
- vue3使用element-plus中el-table組件報錯關(guān)鍵字'emitsOptions'與'insertBefore'分析
- vue3?el-table結(jié)合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動的思路詳解
相關(guān)文章
使用Vue3+Vant組件實現(xiàn)App搜索歷史記錄功能(示例代碼)
最近接了個項目需要開發(fā)一個app項目,由于是第一次接觸這種app開發(fā),經(jīng)過一番思考,決定使用Vue3+Vant前端組件的模式進(jìn)行開發(fā),下面把問題分析及實現(xiàn)代碼分享給大家,需要的朋友參考下吧2021-06-06
如何利用vue-cli監(jiān)測webpack打包與啟動時長
這篇文章主要給大家介紹了關(guān)于如何利用vue-cli監(jiān)測webpack打包與啟動時長的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02
vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決
這篇文章主要介紹了vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09
Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程
這篇文章主要為大家介紹了VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06

