Element表格表头行高问题解决
更新时间：2021年09月01日 10:12:27 作者：Dream_飞翔
在最近一个项目的后台管理系统中，写前端界面时用到了ElementUI，但是发现导入数据表格之后表头的高度一直很高，那么如何解决，本文就来详细的介绍一下
前言
在最近一个项目的后台管理系统中，写前端界面时用到了ElementUI，但是发现导入数据表格之后表头的高度一直很高，如下图所示：
在网页上搜索了很多的解决办法，都没有作用。后来折磨了一段时间后解决了这个问题，在此进行记录。
提示：以下是本篇文章正文内容，下面案例可供参考
一、问题原因
在网页中检查代码时发现没有style来设置表格表头的高度，只有调整.el-main中的line-height属性时表头的高度才会发生变化。
原因是在主页面中用到了Container布局容器，而在布局容器中对.el-main标签的line-height属性进行了修改，才导致的表头特别高。
二、解决方法
将.el-main标签中的line-height属性删除或修改为合适的大小即可
总结
以上便是修改表头的方法，对于用到了布局容器时先检查布局容器，之后再进行对单一组件的修改，之前在网上搜索了很多的方法都不能解决我当下的问题，以后在解决问题前要明白问题到底出在了哪里。
Vue 修改 elementUI table tr th 的高度，以及背景颜色
/* 设置table header的背景颜色 */
.el-table__header 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;
}
到此这篇关于Element表格表头行高问题解决的文章就介绍到这了,更多相关Element 表头行高内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue-cli3访问public文件夹静态资源报错的解决方式
这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue如何通过某个字段获取详细信息，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue3 多种方法的锚点定位，使用 Vue Router 导航守卫可以简化导航逻辑、统一管理导航逻辑和进行权限控制，但需要学习和理解相关概念，并且需要手动编写和管理导航守卫的逻辑,本文给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
Vue中this.$nextTick()方法的使用及代码示例
$nextTick()是Vue.js框架中的一个方法，它主要用于DOM操作，当我们修改Vue组件中的数据时，Vue.js会在下次事件循环前自动更新视图，并异步执行$nextTick()中的回调函数，本文主要介绍了Vue中this.$nextTick()方法的使用及代码示例,需要的朋友可以参考下2023-05-05
Vue路由对象属性 .meta $route.matched详解
今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
今天小编就为大家分享一篇Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue中rules的写法使用小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了Vue组件和Route的生命周期的相关知识,需要的朋友可以参考下2018-02-02
缓存清除成为克服浏览器缓存中过时内容挑战的关键技术,术语“缓存清除”是指故意使静态资源失效或进行版本控制,迫使浏览器在发生更改时获取新资源,本文给大家介绍了Vue如何清除缓存,需要的朋友可以参考下2023-12-12
vue3中定义全局指令时,往往会碰到一个问题：事件无法解绑,为什么会这样,因为通常在指令的mounted钩子中绑定事件,事件处理函数也定义在mounted中,本文讲给大家讲讲vue3中addEventListener的妙用,需要的朋友可以参考下2023-08-08
最新评论