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服务之基础搭建
629 0
|
4月前
|
监控 安全 JavaScript
2025基于springboot的校车预定全流程管理系统
针对传统校车管理效率低、信息不透明等问题,本研究设计并实现了一套校车预定全流程管理系统。系统采用Spring Boot、Java、Vue和MySQL等技术,实现校车信息管理、在线预定、实时监控等功能,提升学校管理效率,保障学生出行安全,推动教育信息化发展。
|
存储 Cloud Native Java
Windows下Minio的安装以及基本使用
MinIO 是一个开源的云原生分布式对象存储系统,兼容亚马逊S3接口,适合存储大容量非结构化数据。本文介绍Windows下MinIO的安装与基本使用:通过以上步骤,您可以在Windows环境中成功安装并使用MinIO。
8984 18
|
SQL XML JavaScript
【若依Java】15分钟玩转若依二次开发,新手小白半小时实现前后端分离项目,springboot+vue3+Element Plus+vite实现Java项目和管理后台网站功能
摘要: 本文档详细介绍了如何使用若依框架快速搭建一个基于SpringBoot和Vue3的前后端分离的Java管理后台。教程涵盖了技术点、准备工作、启动项目、自动生成代码、数据库配置、菜单管理、代码下载和导入、自定义主题样式、代码生成、启动Vue3项目、修改代码、以及对代码进行自定义和扩展,例如单表和主子表的代码生成、树形表的实现、商品列表和分类列表的改造等。整个过程详细地指导了如何从下载项目到配置数据库,再到生成Java和Vue3代码,最后实现前后端的运行和功能定制。此外,还提供了关于软件安装、环境变量配置和代码自动生成的注意事项。
30020 73
|
JavaScript 前端开发
成功解决:jQuery is not defined
这篇文章介绍了如何解决在使用jQuery时浏览器控制台报错`jQuery is not defined`的问题,通过在webpack配置文件中添加特定的插件配置来确保jQuery被正确加载和使用。
成功解决:jQuery is not defined
|
数据采集 JavaScript 前端开发
JavaScript逆向爬虫——使用Python模拟执行JavaScript
JavaScript逆向爬虫——使用Python模拟执行JavaScript
567 2
|
编译器 Android开发
配置环境变量,使CMakeLists.txt可直接使用Android NDK工具链编译项目
配置环境变量,使CMakeLists.txt可直接使用Android NDK工具链编译项目
|
人工智能 前端开发
修改elmentui中el-date-picker下拉框样式(大小)
修改elmentui中el-date-picker下拉框样式(大小)
|
JavaScript
element-ui el-table 表格中行高和字体大小调整
element-ui el-table 表格中行高和字体大小调整
5121 0