亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2024年10月16日 14:40:34   作者:BillKu  
在Vue3中,通過使用深度選擇器::v-deep可以有效修改element-plus中el-table組件的內部樣式,這種方法允許開發(fā)者覆蓋默認的樣式,實現(xiàn)自定義的視覺效果,本文給大家介紹vue3 el-table 通過深度選擇器::v-deep修改組件內部樣式,感興趣的朋友一起看看吧

默認的樣式:

修改的樣式:

CSS:

  // 使用vue3的深度選擇器 ::v-deep(或者 :deep,::v-deep的別名),修改組件內部樣式,從而改變組 件默認的顯示效果
  // 表格奇數(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; // 默認值:padding: 8px 0;
  }
  // 表格(.el-table)、表格表頭單元格(.el-table th)、表格表體單元格(.el-table td)樣式,.el-table__cell相當于.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%);
  // }
  // 表格當前選擇行樣式,與 表格行樣式(: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;
  }

到此這篇關于vue3 el-table 通過深度選擇器::v-deep修改組件內部樣式(默認樣式)的文章就介紹到這了,更多相關vue3 el-table 修改組件內部樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法

    vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法

    這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細,需要的朋友可以參考下
    2024-05-05
  • vue-drag-resize與輸入框/文本框沖突問題

    vue-drag-resize與輸入框/文本框沖突問題

    這篇文章主要介紹了vue-drag-resize與輸入框/文本框沖突問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • 如何使用 Deepseek 寫的uniapp油耗計算器

    如何使用 Deepseek 寫的uniapp油耗計算器

    這篇文章主要介紹了如何使用 Deepseek 寫的uniapp油耗計算器,下面是一個基于 Uniapp 的油耗計算器實現(xiàn),包含 Vue 組件和頁面代碼,需要的朋友可以參考下
    2025-04-04
  • Vue.js 遞歸組件實現(xiàn)樹形菜單(實例分享)

    Vue.js 遞歸組件實現(xiàn)樹形菜單(實例分享)

    本文主要對介紹利用Vue.js 的遞歸組件,實現(xiàn)了一個最基本的樹形菜單。具有很好的參考價值,下面就跟著小編一起來看下吧
    2016-12-12
  • Vue?+?Axios?請求接口方法與傳參方式詳解

    Vue?+?Axios?請求接口方法與傳參方式詳解

    使用Vue的腳手架搭建的前端項目,通常都使用Axios封裝的接口請求,項目中引入的方式不做多介紹,本文主要介紹接口調用與不同形式的傳參方法。對Vue?+?Axios?請求接口方法與傳參問題感興趣的朋友一起看看吧
    2021-12-12
  • vue-router中的鉤子函數(shù)和執(zhí)行順序說明

    vue-router中的鉤子函數(shù)和執(zhí)行順序說明

    這篇文章主要介紹了vue-router中的鉤子函數(shù)和執(zhí)行順序說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • VUE UPLOAD 通過ACTION返回上傳結果操作

    VUE UPLOAD 通過ACTION返回上傳結果操作

    這篇文章主要介紹了VUE UPLOAD 通過ACTION返回上傳結果操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn)

    vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn)

    這篇文章主要介紹了vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • Element-ui Drawer抽屜按需引入基礎使用

    Element-ui Drawer抽屜按需引入基礎使用

    這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • vue項目中使用require.context引入組件

    vue項目中使用require.context引入組件

    本文主要介紹了vue項目中使用require.context引入組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08

最新評論