填坑记录:今天用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. 37-python基础-python3-字典的常用方法-keys()-values()-items()

    有 3 个字典方法,它们将返回类似列表的值,分别对应于字典的键.值和键-值对:keys().values()和 items(). 这些方法返回的值不是真正的列表,它们不能被修改,没有append()方 ...

  2. Windows IIS7 下安装配置 PHP7.0

    确认Microsoft Visual C++版本 Microsoft Visual C++的版本至关重要,根据Microsoft Visual C++版本下载的PHP不同.        PHP官网的 ...

  3. linux每日命令(4):解压命令

    1) Ubuntu 16.04 已经自动安装了unzip 软件,解压命令: unzip FileName.zip 2) 如果没有安装unzip,可以使用下面的命令安装: sudo apt instal ...

  4. Dubbox服务的提供方开发

    (1)创建Maven工程(WAR)dubboxdemo-service  ,在pom.xml中引入依赖 <project xmlns="http://maven.apache.org/ ...

  5. 2018CSS特效集锦牛逼

    https://tympanus.net/codrops/2018/12/27/awesome-demos-from-2018/

  6. Linux下Golang Socket编程原理分析与代码实现

    在POSIX标准推出后,socket在各大主流OS平台上都得到了很好的支持.而Golang是自带Runtime的跨平台编程语言,Go中提供给开发者的Socket API是建立在操作系统原生Socket ...

  7. python 文件复制压缩

    import os import time #这里是需要文件所在的位置 source=['"C:\\My Documents"',"C:\\Code"] #转换 ...

  8. android studio 设计任务内容和识别内容界面 (android stuido design task layout)

    本人android studio版本是 3.4.1,设计了一个任务内容和识别内容的界面,欢迎大家品尝. 界面显示如下图所示: 实现代码如下: <?xml version="1.0&qu ...

  9. 阿里linux-Centos各版本下载

    https://mirrors.aliyun.com/centos/7/isos/x86_64/ Index of /centos/7/isos/x86_64/ ../ 0_README.txt 16 ...

  10. mysql 毫秒时间转换

    当在数据库中存储的时间类型为bigint类型时,及时间的毫秒数 java中:  new DATE().gettime();//获取时间的毫秒数 当需要将毫秒数转化为时间的时候 mysql中: FROM ...