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ù)時(shí)的背景樣式 ::v-deep .el-table__empty-block { background-color: skyblue; } // 表格無數(shù)據(jù)時(shí)的字體樣式 :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?實(shí)現(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時(shí)填充el-input,v-model不唯一問題
- vue3插槽:el-table表頭插入tooltip及更換表格背景色方式
- vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與'insertBefore'分析
- vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng)的思路詳解
相關(guān)文章
vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05如何使用 Deepseek 寫的uniapp油耗計(jì)算器
這篇文章主要介紹了如何使用 Deepseek 寫的uniapp油耗計(jì)算器,下面是一個(gè)基于 Uniapp 的油耗計(jì)算器實(shí)現(xiàn),包含 Vue 組件和頁面代碼,需要的朋友可以參考下2025-04-04Vue.js 遞歸組件實(shí)現(xiàn)樹形菜單(實(shí)例分享)
本文主要對介紹利用Vue.js 的遞歸組件,實(shí)現(xiàn)了一個(gè)最基本的樹形菜單。具有很好的參考價(jià)值,下面就跟著小編一起來看下吧2016-12-12vue-router中的鉤子函數(shù)和執(zhí)行順序說明
這篇文章主要介紹了vue-router中的鉤子函數(shù)和執(zhí)行順序說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07VUE UPLOAD 通過ACTION返回上傳結(jié)果操作
這篇文章主要介紹了VUE UPLOAD 通過ACTION返回上傳結(jié)果操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue項(xiàng)目中監(jiān)聽手機(jī)物理返回鍵的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目中監(jiān)聽手機(jī)物理返回鍵的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01Element-ui Drawer抽屜按需引入基礎(chǔ)使用
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07vue項(xiàng)目中使用require.context引入組件
本文主要介紹了vue項(xiàng)目中使用require.context引入組件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08