ElementUI表格表头行高问题解决

简介: ElementUI表格表头行高问题解决

image.png

前言


在最近一个项目的后台管理系统中,写前端界面时用到了ElementUI,但是发现导入数据表格之后表头的高度一直很高,如下图所示:

image.png

在网页上搜索了很多的解决办法,都没有作用。后来折磨了一段时间后解决了这个问题,在此进行记录。

一、问题原因


在网页中检查代码时发现没有style来设置表格表头的高度,只有调整.el-main中的line-height属性时表头的高度才会发生变化。

image.png

原因是在主页面中用到了Container布局容器,而在布局容器中对.el-main标签的line-height属性进行了修改,才导致的表头特别高。

二、解决方法


.el-main标签中的line-height属性删除修改为合适的大小即可

image.png

总结


以上便是修改表头的方法,对于用到了布局容器时先检查布局容器,之后再进行对单一组件的修改,之前在网上搜索了很多的方法都不能解决我当下的问题,以后在解决问题前要明白问题到底出在了哪里。

image.png

相关文章
|
C++
BaGet服务之基础搭建(上)
BaGet服务之基础搭建
523 0
|
12月前
|
前端开发
element菜单组件样式修改NavMenu导航菜单
本文介绍了如何修改Element UI的NavMenu导航菜单组件的样式,包括激活菜单项的颜色、菜单项hover颜色、父级菜单hover颜色以及菜单行高。提供了相应的CSS代码示例,并展示了如何将这些样式应用到实际的NavMenu组件中。
1090 3
element菜单组件样式修改NavMenu导航菜单
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
|
11月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
246 2
Element表格el-table固定表头且高度占满
本文目录 1. 固定表头 2. 占满高度 3. 使用vh占满高度 4. 动态调整高度
2733 0
心理健康管理系统 【毕业设计系统】
这篇文章介绍了一个心理健康管理系统的毕业设计项目,展示了系统的功能分布、登录注册界面以及不同用户角色的后台管理界面,并提供了技术栈和效果截图。
心理健康管理系统 【毕业设计系统】
|
存储 缓存 JSON
详解HTTP四种请求:POST、GET、DELETE、PUT
【4月更文挑战第3天】
65041 3
详解HTTP四种请求:POST、GET、DELETE、PUT
|
前端开发 UED 开发者
【专栏:HTML与CSS实战项目篇】制作一个响应式图片画廊
【4月更文挑战第30天】本文介绍了如何使用HTML和CSS创建响应式图片画廊。响应式画廊能根据用户设备屏幕大小自动调整布局。首先规划结构,包含一个图片容器和每张图片元素,并为图片提供替代文本。接着设计样式,设置图片大小、间距和视觉效果。然后通过媒体查询实现响应式设计,根据不同屏幕尺寸调整图片排列。同时考虑性能优化,如压缩图片和使用懒加载技术。最后,测试和调试确保画廊在各种设备上正常工作。这个过程强调了响应式设计和用户体验的重要性。
350 4
|
JavaScript 小程序 Java
基于Java+SpringBoot+Vue的大学生考勤系统的设计与实现(亮点:多角色、打卡签到、请假审批、上传成绩单文件、统计图展示)
基于Java+SpringBoot+Vue的大学生考勤系统的设计与实现(亮点:多角色、打卡签到、请假审批、上传成绩单文件、统计图展示)
529 0
基于Java+SpringBoot+Vue的大学生考勤系统的设计与实现(亮点:多角色、打卡签到、请假审批、上传成绩单文件、统计图展示)
|
SQL 消息中间件 缓存
Flink SQL中使用DEBUG模式来输出详细的日志信息,
Flink SQL中使用DEBUG模式来输出详细的日志信息,
512 0