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