Element表格表頭行高問題解決
更新時間：2021年09月01日 10:12:27 作者：Dream_飛翔
在最近一個項目的后臺管理系統(tǒng)中，寫前端界面時用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來詳細的介紹一下
前言
在最近一個項目的后臺管理系統(tǒng)中，寫前端界面時用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，如下圖所示：
在網(wǎng)頁上搜索了很多的解決辦法，都沒有作用。后來折磨了一段時間后解決了這個問題，在此進行記錄。
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、問題原因
在網(wǎng)頁中檢查代碼時發(fā)現(xiàn)沒有style來設(shè)置表格表頭的高度，只有調(diào)整.el-main中的line-height屬性時表頭的高度才會發(fā)生變化。
原因是在主頁面中用到了Container布局容器，而在布局容器中對.el-main標簽的line-height屬性進行了修改，才導(dǎo)致的表頭特別高。
二、解決方法
將.el-main標簽中的line-height屬性刪除或修改為合適的大小即可
總結(jié)
以上便是修改表頭的方法，對于用到了布局容器時先檢查布局容器，之后再進行對單一組件的修改，之前在網(wǎng)上搜索了很多的方法都不能解決我當(dāng)下的問題，以后在解決問題前要明白問題到底出在了哪里。
Vue 修改 elementUI table tr th 的高度，以及背景顏色
/* 設(shè)置table header的背景顏色 */
.el-table__header th, .el-table__header tr {
background-color: #17B3A3;
color: black;
}
/* 設(shè)置表主體的高度 */
.el-table__body td,.el-table__body th{
padding:1px;
}
/* 設(shè)置表頭的高度 */
.el-table__header td,.el-table__header th{
padding:6px 0px;
}
/* 設(shè)置分頁器的高度 */
.site-wrapper .el-pagination {
margin-top: 5px;
text-align: right;
}
.el-pager li.active {
color: #080909;
cursor: default;
background-color: #17B3A3;
border-radius: 2px;
}
到此這篇關(guān)于Element表格表頭行高問題解決的文章就介紹到這了,更多相關(guān)Element 表頭行高內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vuejs2.0 select 動態(tài)綁定下拉框支持多選
這篇文章主要介紹了vuejs2.0 select動態(tài)綁定下拉框 ，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
一文詳解vue-router中的導(dǎo)航守衛(wèi)
vue-router提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航，在 vue-router 中，導(dǎo)航守衛(wèi)是一種非常重要的功能，所以本文將詳細講解一下vue-router中的導(dǎo)航守衛(wèi)，感興趣的同學(xué)跟著小編一起來看看吧2023-07-07
這篇文章主要介紹了vue3.0封裝輪播圖組件的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要為大家介紹了專業(yè)級的Vue?多級菜單設(shè)計實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
解決vue中修改了數(shù)據(jù)但視圖無法更新的情況
今天小編就為大家分享一篇解決vue中修改了數(shù)據(jù)但視圖無法更新的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了buildAdmin開源項目引入四種圖標方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
近期在用vue做一個環(huán)保類的項目,要求使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue接入高德地圖的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
在vue中實現(xiàn)低代碼組件參數(shù)配置的流程步驟
這篇文章主要介紹了在vue中實現(xiàn)低代碼組件參數(shù)配置的流程步驟，文中的代碼示例講解的非常詳細，對我們的學(xué)習(xí)或工作有一定的參考價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue3 編寫自定義指令插件的示例代碼,主要包括編寫自定義插件，在 main.ts 中加載啟用插件的代碼介紹，對Vue3自定義指令插件相關(guān)知識感興趣的朋友一起看看吧2022-07-07
這篇文章主要介紹了vue路由傳參三種基本方式詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12