如何解決ElementPlus的el-table底白線(xiàn)問(wèn)題
ElementPlus的el-table底白線(xiàn)問(wèn)題
自己在使用el-table的時(shí)候，想去掉table的線(xiàn)和底透明。
透明做到了，底部總有白線(xiàn)，網(wǎng)上找到很多文章，試了很多方法，都不解決。
最后看css，發(fā)現(xiàn)通過(guò)以下辦法可以解決，記錄下來(lái)備忘。
:deep(.el-table__inner-wrapper::before) {
? ? left: 0;
? ? bottom: 0;
? ? width: 100%;
? ? height: 0;
? ? z-index: 3;
}Element Plus el-table的樣式調(diào)整
網(wǎng)上查如何調(diào)整el-table表格內(nèi)部樣式，一大堆資料說(shuō)直接用css調(diào)整原生樣式，來(lái)回?fù)v鼓半天還是不滿(mǎn)意，而且版不同樣式引用還不一定有效果，最后看官方文端摸索了一下調(diào)整方法，記錄如下供大家參考：
- 調(diào)整表頭樣式，直接在el-table內(nèi)部綁定header-cell-style，接收的數(shù)據(jù)格式為對(duì)象
- cell-style調(diào)整每一列的樣式，接受的數(shù)據(jù)格式同樣為對(duì)象，當(dāng)然也可以使用函數(shù)動(dòng)態(tài)變化返回值。
- el-table-column中設(shè)置 align=“center”，讓單元格內(nèi)容居中，不需要其他多余設(shè)置
- 其他更多效果可參考官方文檔
// vue3 組件為elementplus
<el-table
:data="tableData"
:header-cell-style="{
'text-align': 'center',
'font-size': '18px',
'background': '#162556 !important',
'color': '#ffffff',
'border': 'none !important'
}"
:cell-style=changeCellStyle
>
<el-table-column align="center" prop="name" label="單位名稱(chēng)"></el-table-column>
<el-table-column align="center" prop="value" label="數(shù)值大小%"></el-table-column>
</el-table>
<script setup>
// 動(dòng)態(tài)調(diào)整樣式
function changeCellStyle(row) {
// 可自行輸出row查看樣式
const styleObject = {
'background': '#090e2e !important',
'color': '#ffffff',
'border-bottom': '2px solid #173d91',
'font-size' : '18px',
'cursor': 'pointer'
}
if(row.column.label == 'xxxx') {
styleObject.color = '#00f1ed'
}else{
if(row.row.value < warningValue) {
styleObject.color = 'red'
}
}
return styleObject
}
</script>
效果圖：
我們發(fā)現(xiàn)底部還有白線(xiàn)，通過(guò)網(wǎng)頁(yè)控制臺(tái)選中查看，發(fā)現(xiàn)還是有內(nèi)部樣式搗亂。
此時(shí)果斷用deep深度選擇器對(duì)其進(jìn)行修改，這里我使用的是scss，不同的語(yǔ)言，deep深度選擇器的使用可能有差別。
:deep(.el-table tr) {
background-color: #162556;
}
:deep(.el-table__inner-wrapper::before) {
background-color: #173d91;
}
修改后的樣式：
后續(xù)：其實(shí)這個(gè)表格還是有不完美的地方左右兩邊的線(xiàn)無(wú)法清除掉。更奇怪的是，白色背景下，左右兩邊的線(xiàn)是不存在的，可是換一個(gè)深色背景，左右兩邊的線(xiàn)卻顯示出來(lái)，期待后續(xù)能夠解決這個(gè)問(wèn)題。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue 防止多次點(diǎn)擊，可以有效防止惡意點(diǎn)擊，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
今天小編就為大家分享一篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐
本文主要介紹了vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vue組件的層級(jí)關(guān)系，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue把輸入框的內(nèi)容添加到頁(yè)面的實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于vue把輸入框的內(nèi)容添加到頁(yè)面的實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們學(xué)習(xí)下。2019-11-11
vue3 開(kāi)始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開(kāi)始時(shí)間)
本文通過(guò)示例代碼介紹了vue3 開(kāi)始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開(kāi)始時(shí)間)的相關(guān)操作,代碼簡(jiǎn)單易懂,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue使用Font Awesome的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue項(xiàng)目中icon亂碼的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目中icon亂碼的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
利用Vue3實(shí)現(xiàn)可復(fù)制表格的方法詳解
表格是前端非常常用的一個(gè)控件，本文主要為大家介紹了Vue3如何實(shí)現(xiàn)一個(gè)簡(jiǎn)易的可以復(fù)制的表格，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-12-12
vue-cli構(gòu)建項(xiàng)目下使用微信分享功能
這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目下使用微信分享功能,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05