Vue如何設(shè)置el-table背景透明樣式
更新時(shí)間：2022年08月12日 16:43:23 作者：有名呀
本文主要介紹了Vue如何設(shè)置el-table背景透明樣式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
【前言】
一般我們?cè)谑褂肊lementUI組件庫(kù)的時(shí)候，在使用el-table時(shí)，背景通常是白色的，但有時(shí)候不能滿足我們的實(shí)際需求，我想讓el-table背景變?yōu)橥该魃?，下面就?lái)說(shuō)一下如何實(shí)現(xiàn)。
【內(nèi)容】
說(shuō)明：因?yàn)槲覀兺ǔ６际鞘褂肊lementUI庫(kù)的組件，這個(gè)組件庫(kù)是有自己的一套樣式的，所以要想實(shí)現(xiàn)自己想要的效果，難免要重寫(xiě)樣式來(lái)實(shí)現(xiàn)。
重寫(xiě)樣式需要加（>>> 或者 /deep/），不加的話是不會(huì)生效的。
1、在el-table外加div并自定義class
<div class="table" style="margin-top:20px;">
<el-table :data="tableData" :header-cell-style="getRowClass" >
<el-table-column label="a" type="index"></el-table-column>
<el-table-column label="b" prop="data"></el-table-column>
</el-table>
</div>
2、重寫(xiě)css樣式
.table /deep/ .el-table th {
background-color: transparent!important;
}
.table /deep/ .el-table tr {
background-color: transparent!important;
}
.table /deep/ .el-table--enable-row-transition .el-table__body td, .el-table .cell{
background-color: transparent;
}
.el-table::before {//去除底部白線
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
到此這篇關(guān)于Vue如何設(shè)置el-table背景透明樣式的文章就介紹到這了,更多相關(guān)Vue el-table背景透明內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在 Vue 中編寫(xiě) SVG 圖標(biāo)組件的方法
這篇文章主要介紹了在 Vue 中編寫(xiě) SVG 圖標(biāo)組件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了分享Vue組件傳值的幾種常用方式，文章圍繞主題斬開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Vue3組件不發(fā)生變化如何監(jiān)聽(tīng)pinia中數(shù)據(jù)變化
這篇文章主要給大家介紹了關(guān)于Vue3組件不發(fā)生變化如何監(jiān)聽(tīng)pinia中數(shù)據(jù)變化的相關(guān)資料,pinia是Vue的存儲(chǔ)庫(kù),它允許您跨組件/頁(yè)面共享狀態(tài),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
介紹了如何在Vue項(xiàng)目中使用Axios封裝請(qǐng)求、配置攔截器,并在api.js中統(tǒng)一管理API接口,同時(shí),也講解了如何在vite.config.js中配置解決跨域問(wèn)題,這些操作可以優(yōu)化前端代碼結(jié)構(gòu),提高開(kāi)發(fā)效率2024-09-09
淺析Vue中權(quán)限管理的實(shí)現(xiàn)
在前端開(kāi)發(fā)中,權(quán)限管理是一項(xiàng)至關(guān)重要的任務(wù),本教程將深入探討如何在?Vue.js?項(xiàng)目中實(shí)施權(quán)限管理,并詳細(xì)講解如何實(shí)現(xiàn)到按鈕級(jí)別的細(xì)粒度控制,希望對(duì)大家有所幫助2024-11-11
Vue無(wú)限滑動(dòng)周選擇日期的組件的示例代碼
這篇文章主要介紹了Vue無(wú)限滑動(dòng)周選擇日期的組件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值
這篇文章主要介紹了vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在 setup 語(yǔ)法糖中通過(guò) import 引入的內(nèi)容，也可以直接在 template 標(biāo)簽中使用，這篇文章主要介紹了Vue?使用?setup?語(yǔ)法糖,需要的朋友可以參考下2023-10-10
在Vue當(dāng)中同時(shí)配置多個(gè)路由文件的方法案例代碼
這篇文章主要介紹了在Vue當(dāng)中同時(shí)配置多個(gè)路由文件的方法,包含具體代碼，本文分步驟結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了vue?tailwindcss安裝配置教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09