Element表格表头行高问题解决

目录
  • 前言
  • 一、问题原因
  • 二、解决方法
  • Vue 修改 elementUI table tr th 的高度，以及背景颜色

前言

在最近一个项目的后台管理系统中，写前端界面时用到了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 表头行高内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解element-ui表格中勾选checkbox，高亮当前行

    详解element-ui表格中勾选checkbox，高亮当前行

    我们在做后台管理系统的时候经常需要操作表格,这里我们要实现的一个功能就是,勾选复选框,高亮显示当前行,也就是当前行样式改变.这是一个非常常见的使用场景,官网给我们提供了一个带Checkbox的table表格,但是并没有给出上述使用案例,解决办法有很多,我简单总结下我自己的实现过程,希望能帮助到有同样需求的小伙伴. 勾选表格中当前项时会触发selection-change事件,在<el-table>中绑定handleSelectionChange方法. <el-table @selecti

  • vue+elementUI中表格高亮或字体颜色改变操作

    重点的代码: :row-style="setRowStyle"这个属性就是在table标签绑定的 :row-style="setRowStyle" // 这个方法直接加到methods里就好了,页面会自动调用的 setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } }, 具体代码: hmtl <el-table width="100%" :data=&

  • vue+elementUI实现表格关键字筛选高亮

    vue+elementUI实现表格关键字筛选高亮

    本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码,供大家参考,具体内容如下 代码: <template> <div class=""> <div class="top"> <!-- 筛选 --> <div class="screen"> <div style="width:30%">筛选:</div> <el-i

  • VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    在开发中,需要表格控件根据浏览器高度进行调整,固定表头,且然后多余的出滚动条,官方给出的: 只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码. 然后直接上template代码: <template> <el-table :data="tableData3" height="250" border style="width: 100%"> <el-table-column

  • element el-table表格的二次封装实现(附表格高度自适应)

    element el-table表格的二次封装实现(附表格高度自适应)

    前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多个页面使用相同的功能,就要多次重复写逻辑上差不多的代码,所以打算对表格这个组件进行封装,将相同的代码和逻辑封装在一起,把不同的业务逻辑抽离出来.话不多说,下面就来实现一下吧. 一.原生el-tbale代码--简单の封装 这里直接引用官方的基础使用模板,直接抄过来(✪ω✪),下面代码中主要是抽离html部分,可以看出每个el-table-column

  • Element表格表头行高问题解决

    Element表格表头行高问题解决

    目录 前言 一.问题原因 二.解决方法 Vue 修改 elementUI table tr th 的高度,以及背景颜色 前言 在最近一个项目的后台管理系统中,写前端界面时用到了ElementUI,但是发现导入数据表格之后表头的高度一直很高,如下图所示: 在网页上搜索了很多的解决办法,都没有作用.后来折磨了一段时间后解决了这个问题,在此进行记录. 提示:以下是本篇文章正文内容,下面案例可供参考 一.问题原因 在网页中检查代码时发现没有style来设置表格表头的高度,只有调整.el-main中的li

  • vue实现element表格里表头信息提示功能(推荐)

    如图:在element表格操作一栏需要添加提示功能 实现效果 如图:鼠标浮上去弹出tips 解决方案 1.编写组件 在 promptMessage.vue 文件里面实现 <template> <!-- 处理element表格表头文字提示特别添加全局注册组件 --> <div class="promt-message-tooltip"> <el-tooltip effect="light" placement="le

  • 使用Element实现表格表头添加搜索图标和功能

    使用Element实现表格表头添加搜索图标和功能

    目录 Element 表格表头添加搜索图标和功能 主要实现 table的slot=‘header’ element ui表格el-tabel给表头加icon图标 设置 Scoped slot 来自定义表头 Element 表格表头添加搜索图标和功能 主要实现 table的slot=‘header’ headerData是表头的循环数组 tableData是表格内容的数组 <template slot="header"></template> 自定义表头的内容 注

  • JS组件Bootstrap Table表格多行拖拽效果实现代码

    JS组件Bootstrap Table表格多行拖拽效果实现代码

    前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态 二.需求分析 通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的

  • Java设置PDF跨页表格重复显示表头行的步骤详解

    Java设置PDF跨页表格重复显示表头行的步骤详解

    目录 前言 1.导入Jar包 2.Java代码 总结 前言 在创建表格时,如果表格内容出现跨页显示的时候,默认情况下该表格的表头不会在下一页显示,在阅读体验上不是很好.下面分享一个方法如何在表格跨页是显示表格的表头内容,这里只需要简单使用方法 grid.setRepeatHeader(true);即可. 具体参考如下方法步骤. 1.导入Jar包 这里导入的是Free Spire.PDF for Java的jar包,Spire.PDF for Java 支持的功能非常丰富,例如 PDF 文档安全性

  • Vue+Element自定义纵向表格表头教程

    如下所示: 代码如下: <table style="width: 100%" class="myTable"> <tr v-for="(item,i) in statDatas" :key="i"> <td class="column">{{ item.key }}</td> <td class="column">{{ item

  • element表格去掉表头的实现方法

    文档提示用属性show-header <el-table :data="tableData1" :span-method="arraySpanMethod" border :show-header="status" <el-table-column prop="lable" label="" width="180"> </el-table-column> /

  • element表格行列的动态合并示例详解

    element表格行列的动态合并示例详解

    目录 效果图 代码详解 数据结构 行合并 列合并 完整代码+注释 效果图 合并行 合并列 element的table提供了合并行或者列的方法,并且有一个示例,传送入口:element.eleme.cn/#/zh-CN/com… 但是实际应用中,后台数据的返回格式和指定合并肯定是动态且没有规律的.element的示例过于简单,并且也没有什么太多的解释.实操中就碰到了这个问题.现在记录下来. 代码详解 实操中,需要合并的代码通常就是子数据需要进行合并,因为后台返回的格式都是父数据中包裹着子数据,这种

  • 详解C#设置Excel数据自适应行高、列宽的2种情况

    详解C#设置Excel数据自适应行高、列宽的2种情况

    Excel表格中,由于各种数据的复杂性,可能存在单元格中的数据字号大小.数据内容长度不一而出现,列宽过宽.过窄或者行高过大.过小的问题.常见的解决方法是调整行高.列宽.在Microsoft Excel中,在单元格格式设置中可手动设置自适应行高或自适应列宽,但通过代码,我们可以通过方法AutoFitColumns()或者AutoFitRows()来设置指定数据范围或整个工作表的自适应行高.列宽.这里设置自适应分以下2种情况来进行: 1. 固定数据,设置行高.列宽自适应数据 2. 固定行高.列宽,设

  • jQuery 实现批量提交表格多行数据的方法

    批量提交用jquery操作起来还是很方便的,主要的思路就是 在动态生成表格时每一行都存下这条数据的唯一id,然后监听选择,把选中的数据放入数组,最后提交到后台就OK了. 先上一部分代码(这是表头以及一个全选按钮) <table class="ui_table ui_table_hover ui_table_striped ui_table_style02 table_fixed"> <tr> <th width="3%" class=&

随机推荐