填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下:

  

  因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻松控制高度,于是去百度大佬们的解决办法,也试了好几个,发现改变不了样式,快准备放弃等明天问下项目组的人的时候,看到了一篇文章:https://blog.csdn.net/u012499506/article/details/81217277(Vue修改element ui table tr th高度以及背景颜色),于是就抱着试试看的心态把大佬的改变背景色的代码复制过来用了一下,发现可以使用,于是就到处折腾,终于实现想要的效果了,先放上代码和效果图:

.el-table__header tr,
.el-table__header th {
padding: 0;
height: 40px;
}
.el-table__body tr,
.el-table__body td {
padding: 0;
height: 40px;
}

  

  我发现表头的行高和表格list内容的行高经组件渲染出来后是在不同的类名下的,截图:

所以将上面的代码放在css下最外层的类名中即可,也不晓得是不是歪打正着。。。也算解决了我遇到的一个坑,留个记录。

补充:今天(2019/6/4)在新的项目又用到表格,然后按照之前的方法设置,但是没有成功,然后调试了半天,原来是在style上设置了scoped属性,去掉这个属性即可,具体为啥后面项目搞了再研究下...

element ui设置表格表头高度和每一行的高度的更多相关文章

  1. element UI 调整表格行高

    使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...

  2. element UI实现表格中添加开关控制按钮

    我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...

  3. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  4. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  5. 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  6. element ui的表格列设置fixed后做动态表格出现表格错乱

    最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...

  7. Vue+element UI实现表格数据导出Excel组件

    介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...

  8. vue element UI el-table 表格调整行高的处理方法

    这是我在工作项目中遇到的问题,我想将标记处下方的表格高度调低一点,也就是想实现下面的这个效果: 代码调整如下: 说明: 缩小:行高到一定程度之后便不能缩小. 好像最小35px.各位可以试一下. 升高: ...

  9. vue + element ui table表格二次封装 常用功能

    因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...

随机推荐

  1. 分布式-技术专区-Redis分布式锁实现-第一步

    承接前面一篇Redis分布式锁的原理介绍 https://www.cnblogs.com/liboware/p/11921759.html 我们针对于实现方案进行接下来上篇进行重新的规划和定义以及完善 ...

  2. springMVC的数据封装

    编写实体类: package cn.mepu.domain; /** * @User 艾康 * @create 2019-11-12 13:56 */ public class User { priv ...

  3. WPF gridcontrol 后台代码清除过滤筛选条件

    WPF 后台清除gridcontrol过滤筛选条件: ColumnName:列名 user_GridControl:gridcontrol控件名 user_GridControl.ClearColum ...

  4. Ubuntu 16.04 安装docker-ce,docker-compose

    Get Docker CE for Ubuntu 卸载旧版本 sudo apt-get remove docker docker-engine docker.io containerd runc 使用 ...

  5. loj2573[TJOI2018]数字计算

    题意:操作1:x=x*m,输出x%mod.2.x/=map[m].m即第m次操作,保证该次操作为1操作,并且每个操作最多只会被删一次.q<=1e5. 线段树维护操作信息的乘积,删除把对应位置的权 ...

  6. Centos 更改语言设置为中文

    说明 自己装系统时一般都可以自定义选择系统语言.可是云端服务器一般都是安装好的镜像,默认系统语言为英文,对于初学者可能还会有搞不懂的计算机词汇.这里简单说一下centos7怎么修改系统语言为中文. 修 ...

  7. rest_framework框架实现之(认证)

    一认证 我们可以想想,我们要访问一个页面,需不需要对其进行认证,希望进入页面的时候看到哪些内容,一般是根据用户的不同而不同 首先,我们先设计一个表,如何知道对方通过了验证,我们可以考虑给其加一个tok ...

  8. leetcode-162周赛-1252-奇数值单元格数目

    题目描述: 自己的提交: class Solution: def oddCells(self, n: int, m: int, indices: List[List[int]]) -> int: ...

  9. C之输入输出函数(2) -- gets()

    https://www.ibm.com/support/knowledgecenter/en/ssw_ibm_i_71/rtref/gets.htm#gets #include <stdio.h ...

  10. 实战:基于 Spring 的应用配置如何迁移至阿里云应用配置管理 ACM

    最近遇到一些开发者朋友,准备将原有的Java Spring的应用配置迁移到 阿里云应用配置管理 ACM 中.迁移过程中,遇到不少有趣的问题.本文将通过一个简单的样例来还原迁移过程中遇到的问题和相关解决 ...