目錄

• 前言
• 一、問題原因
• 二、解決方法
• 修改 elementUI table tr th 的高度，以及背景顏色

前言

在最近一個專案的後臺管理系統中，寫前端介面時用到了ElementUI，但是發現匯入資料表格之後表頭的高度一直很高，如下圖所示：

在上搜索了很多的解決辦法，都沒有作用。後來折磨了一段時間後解決了這個問題，在此進行記錄。

提示：以下是本篇文章正文內容，下面案例可供參考

一、問題原因

在網頁中檢查程式碼時發現沒有style來設定表格表頭的高度，只有調整.el-main中的line-height屬性時表頭的高度才會發生變化。

原因是在主頁面中用到了Container佈局容器，而在佈局容器中對.el-main

二、解決方法

將.el-main標籤中的line-height屬性刪除或修改為合適的大小即可

總結

以上便是修改表頭的方法，對於用到了佈局容器時先檢查佈局容器，www.cppcns.com之後再進行對單一元件的修改，之前在網上搜索了很多的方法都不能解決我當下的問題，以後在解決問題前要明白問題到底出在了哪裡。

Vue 修改 elementUI table tr th 的高度，以及背景顏色

/* 設定table header的背景顏色 */

.el-table__headeHWZPKr th,.el-table__header tr {
background-color: #17B3A3;

color: black;

}

/* 設定表主體的高度 */

.el-table__body td,.el-table__body th{
padding:1px;

}

/* 設定表頭的高度 */

.el-table__header td,.el-table__header th{
padding:6px 0px;

}

/* 設定分頁器的高度 */

.site-wrapper .el-pagination {
margin-top: 
 
5px;

text-align: right;

}

.el-pager li.active {
color: #080909;

cursor: default;

background-color: #17B3A3;

border-radius: 2px;

}

到此這篇關HWZPK於Element表格表頭行高問題解決的文章就介紹到這了,更多相關Element 表頭行高內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！