如何解決ElementPlus的el-table底白線問題
更新時間：2022年12月29日 16:26:31 作者：cyf_2008
這篇文章主要介紹了如何解決ElementPlus的el-table底白線問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
ElementPlus的el-table底白線問題
自己在使用el-table的時候，想去掉table的線和底透明。
透明做到了，底部總有白線，網(wǎng)上找到很多文章，試了很多方法，都不解決。
最后看css，發(fā)現(xiàn)通過以下辦法可以解決，記錄下來備忘。
: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)部樣式，一大堆資料說直接用css調(diào)整原生樣式，來回?fù)v鼓半天還是不滿意，而且版不同樣式引用還不一定有效果，最后看官方文端摸索了一下調(diào)整方法，記錄如下供大家參考：
- 調(diào)整表頭樣式，直接在el-table內(nèi)部綁定header-cell-style，接收的數(shù)據(jù)格式為對象
- cell-style調(diào)整每一列的樣式，接受的數(shù)據(jù)格式同樣為對象，當(dāng)然也可以使用函數(shù)動態(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="單位名稱"></el-table-column>
<el-table-column align="center" prop="value" label="數(shù)值大小%"></el-table-column>
</el-table>
<script setup>
// 動態(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)底部還有白線，通過網(wǎng)頁控制臺選中查看，發(fā)現(xiàn)還是有內(nèi)部樣式搗亂。
此時果斷用deep深度選擇器對其進(jìn)行修改，這里我使用的是scss，不同的語言，deep深度選擇器的使用可能有差別。
:deep(.el-table tr) {
background-color: #162556;
}
:deep(.el-table__inner-wrapper::before) {
background-color: #173d91;
}
修改后的樣式：
后續(xù)：其實這個表格還是有不完美的地方左右兩邊的線無法清除掉。更奇怪的是，白色背景下，左右兩邊的線是不存在的，可是換一個深色背景，左右兩邊的線卻顯示出來，期待后續(xù)能夠解決這個問題。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue from-validate 表單驗證的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
解決vue打包 npm run build-test突然不動了的問題
這篇文章主要介紹了解決vue打包 npm run build-test突然不動了的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue中$forceUpdate()的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
組件系統(tǒng)是 Vue 的一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用。這篇文章主要介紹了Vue中的組件及路由使用 ,需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了vue原理Compile從新建實例到結(jié)束流程源碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本篇文章主要介紹了vue下跨域設(shè)置的相關(guān)介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
在vue項目中使用動畫其實有多種方式，可以使用vue中的過渡transition，可以使用animate動畫與transition配合使用，也可以單獨使用animate動畫庫，下面我們開始介紹在vue中單獨使用animate動畫，感興趣的朋友一起看看吧2018-08-08
說說Vue.js中的functional函數(shù)化組件的使用
這篇文章主要介紹了說說Vue.js中的functional函數(shù)化組件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了Vue.js實現(xiàn)立體計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02