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)文章
這篇文章主要介紹了vue組件打包并發(fā)布到npm的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了詳解nginx配置vue h5 history去除#號，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了Vue3中使用ref標簽對組件進行操作方法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
在Kubernetes(K8S)部署前端Vue項目通常會涉及到使用Nginx作為靜態(tài)資源服務(wù)器的一個重要部分,這篇文章主要給大家介紹了關(guān)于使用寶塔面板中Nginx部署前端Vue項目的相關(guān)資料,需要的朋友可以參考下2024-10-10
本文主要介紹了Vue實現(xiàn)DOM元素拖放互換位置示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
vue中前進刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實例講解
今天小編就為大家分享一篇vue中前進刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Nuxt之vue服務(wù)端渲染，NUXT集成了利用Vue開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
下面小編就為大家分享一篇解決vue-cli + webpack 新建項目出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
解決vue 使用axios.all()方法發(fā)起多個請求控制臺報錯的問題
這篇文章主要介紹了解決vue 使用axios.all()方法發(fā)起多個請求控制臺報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11