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服务之基础搭建
663 0
|
存储 Cloud Native Java
Windows下Minio的安装以及基本使用
MinIO 是一个开源的云原生分布式对象存储系统,兼容亚马逊S3接口,适合存储大容量非结构化数据。本文介绍Windows下MinIO的安装与基本使用:通过以上步骤,您可以在Windows环境中成功安装并使用MinIO。
9773 19
|
开发框架 JavaScript 前端开发
在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。
在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。
|
JavaScript 前端开发
成功解决:jQuery is not defined
这篇文章介绍了如何解决在使用jQuery时浏览器控制台报错`jQuery is not defined`的问题,通过在webpack配置文件中添加特定的插件配置来确保jQuery被正确加载和使用。
成功解决:jQuery is not defined
|
编译器 Android开发
配置环境变量,使CMakeLists.txt可直接使用Android NDK工具链编译项目
配置环境变量,使CMakeLists.txt可直接使用Android NDK工具链编译项目
|
存储 大数据 Python
NumPy 内存管理和性能调优
【8月更文第30天】NumPy 是 Python 中用于科学计算的核心库之一,它提供了高效的数组操作功能。然而,随着数据集的增大,如何有效地管理和优化 NumPy 数组的内存使用成为了一个重要的问题。本文将介绍一些技巧,帮助你更好地管理和优化 NumPy 数组的内存使用。
720 0
|
Android开发 PyTorch 算法框架/工具
PyTorch 2.2 中文官方教程(二十)(2)
PyTorch 2.2 中文官方教程(二十)
435 0
PyTorch 2.2 中文官方教程(二十)(2)
|
数据可视化 物联网 PyTorch
通义千问7B模型开源,魔搭最佳实践来了
通义千问开源!阿里云开源通义千问70亿参数模型,包括通用模型Qwen-7B-Base和对话模型Qwen-7B-Chat,两款模型均已上线ModelScope魔搭社区,开源、免费、可商用,欢迎大家来体验。
|
前端开发 UED 开发者
【专栏:HTML与CSS实战项目篇】制作一个响应式图片画廊
【4月更文挑战第30天】本文介绍了如何使用HTML和CSS创建响应式图片画廊。响应式画廊能根据用户设备屏幕大小自动调整布局。首先规划结构,包含一个图片容器和每张图片元素,并为图片提供替代文本。接着设计样式,设置图片大小、间距和视觉效果。然后通过媒体查询实现响应式设计,根据不同屏幕尺寸调整图片排列。同时考虑性能优化,如压缩图片和使用懒加载技术。最后,测试和调试确保画廊在各种设备上正常工作。这个过程强调了响应式设计和用户体验的重要性。
586 4
|
SQL 消息中间件 缓存
Flink SQL中使用DEBUG模式来输出详细的日志信息,
Flink SQL中使用DEBUG模式来输出详细的日志信息,
675 0