element ui设置表格表头高度和每一行的高度
填坑记录:今天用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设置表格表头高度和每一行的高度的更多相关文章
- element UI 调整表格行高
使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...
- element UI实现表格中添加开关控制按钮
我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- element ui的表格列设置fixed后做动态表格出现表格错乱
最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- vue element UI el-table 表格调整行高的处理方法
这是我在工作项目中遇到的问题,我想将标记处下方的表格高度调低一点,也就是想实现下面的这个效果: 代码调整如下: 说明: 缩小:行高到一定程度之后便不能缩小. 好像最小35px.各位可以试一下. 升高: ...
- vue + element ui table表格二次封装 常用功能
因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...
随机推荐
- JPA 唯一索引
@Table(name = "adam_module", uniqueConstraints = @UniqueConstraint(columnNames = {"in ...
- csdn加入暂时会话功能
版权声明:本文为博主原创文章.若要转载请注明出处! ^_^ https://blog.csdn.net/u010892841/article/details/25334153 ...
- 自己写IRP,做文件操作,遇到的坑
在写文件的时候没问题,但是写完文件之后,就出问题了, 什么问题呢,是因为写完文件之后,文件关闭之后, 调用了一个叫做 CcFlushCache 的函数,这个函数是从CcWriteBehind 调过来的 ...
- java实现单链表逆置
class LNode { public LNode next; public int data; } /*逆置链表*/ class Nizhi { private static LNode head ...
- Oracle 一个表的数据update到另一个表
A表数据 B表数据 现在要把B表 B_COSTS 的值update到A表 A_COSTS 字段 SQL语法: update a set (a.a_costs) = (select b. ...
- Spyder中的一些快捷键
熟练spyder中的一些快捷键后,能极大提升code效率. 这里列出常用的快捷键.(注:在spyder导航栏Tools-Preferences-Keyboard shortcut中有所有的快捷键) T ...
- mongodb客户端操作常用命令(续)
之前有写过一篇mongodb客户端的操作常用命令 ,今天接着来记录分享一些关于mongodb账户权限设置的命令操作 上期mongodb客户端的操作常用命令地址:https://www.cnblogs. ...
- Jlink V8固件恢复
使用附件中的PDF文档步骤即可,但是千万千万记得两点,更新系统很关键,很关键 1.WINXP系统 2.32Bit系统 切记切记,其他的win7,winxp 64就不用试着更新了,全部是坑 大概步骤 J ...
- sql 数据库
在关系数据库中,最常用的操作就是查询.直线电机推杆 准备数据 为了便于讲解和练习,我们先准备好了一个students表和一个classes表,它们的结构和数据如下: students表存储了学生信息: ...
- 【LeetCode 24】两两交换链表中的节点
题目链接 [题解] 简单的链表操作 [代码] /** * Definition for singly-linked list. * struct ListNode { * int val; * Lis ...