如何解決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)整原生樣式，來回搗鼓半天還是不滿意，而且版不同樣式引用還不一定有效果，最后看官方文端摸索了一下調(diào)整方法，記錄如下供大家參考：
- 調(diào)整表頭樣式，直接在el-table內(nèi)部綁定header-cell-style，接收的數(shù)據(jù)格式為對象
- cell-style調(diào)整每一列的樣式，接受的數(shù)據(jù)格式同樣為對象，當然也可以使用函數(shù)動態(tài)變化返回值。
- el-table-column中設置 align=“center”，讓單元格內(nèi)容居中，不需要其他多余設置
- 其他更多效果可參考官方文檔
// 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深度選擇器對其進行修改，這里我使用的是scss，不同的語言，deep深度選擇器的使用可能有差別。
:deep(.el-table tr) {
background-color: #162556;
}
:deep(.el-table__inner-wrapper::before) {
background-color: #173d91;
}
修改后的樣式：
后續(xù)：其實這個表格還是有不完美的地方左右兩邊的線無法清除掉。更奇怪的是，白色背景下，左右兩邊的線是不存在的，可是換一個深色背景，左右兩邊的線卻顯示出來，期待后續(xù)能夠解決這個問題。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了vue 防止多次點擊，可以有效防止惡意點擊，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
今天小編就為大家分享一篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue+webrtc(騰訊云) 實現(xiàn)直播功能的實踐
本文主要介紹了vue+webrtc(騰訊云) 實現(xiàn)直播功能的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vue組件的層級關系，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
在本篇文章里小編給大家整理的是關于vue把輸入框的內(nèi)容添加到頁面的實例以及相關知識點，需要的朋友們學習下。2019-11-11
vue3 開始時間與結束時間比較驗證(結束時間需要大于開始時間)
本文通過示例代碼介紹了vue3 開始時間與結束時間比較驗證(結束時間需要大于開始時間)的相關操作,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue使用Font Awesome的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue項目中icon亂碼的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
表格是前端非常常用的一個控件，本文主要為大家介紹了Vue3如何實現(xiàn)一個簡易的可以復制的表格，文中的示例代碼講解詳細，需要的可以參考一下2022-12-12
這篇文章主要介紹了vue-cli構建項目下使用微信分享功能,本文通過實例代碼相結合的形式給大家介紹的非常詳細，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05