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 ...
随机推荐
- zabbix--Simple checks 基本检测
开始 Simple checks 通常用来检查远程未安装代理或者客户端的服务. 使用 simple checks,被监控客户端无需安装 zabbixagent 客户端, zabbix ser ...
- Python运算
逻辑运算 指数运算 整除 所以,我们来做个运算吧~ 用raw_input()可以从键盘上读取输入,raw_input()中的字符串会在屏幕上面打印出来 用int()转只因为Python默认都是以str ...
- Vue 单页应用 的 首屏优化
对于单页应用,要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长.所以我们需要做一些相应的优化,减少响应时间,尽快把首屏显示出来. 1.压缩 ...
- BUUCTF RE部分题目wp
RE 1,easyre拖进ida,得到flag 2,helloworld 将文件拖入apk改之理,得到flag 3,xor拖进ida,就是简单异或,写脚本 glo=[0x66,0x0a,0x6b,0x ...
- CentOS7最小化安装后
查看ip地址:ip addr/ifconfig 修改ip地址:/etc/sysconfig/network-script/网卡,修改onboot=yes BOOTPROTO=dhcp -->BO ...
- yum 命令跳过特定(指定)软件包升级方法
今天在更新rhel的时候,遇到了yum update 更新失败,一些包的依赖关系有问题,报出了需要rpm_check_debug的信息. 我man 一下rpm的命令没有看到check相关的选项,也就没 ...
- 面试之加分项vue(没看懂,。。。。)
对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站.但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了.在面试过程很多 ...
- PHP多参数方法的重构
假设我们要完成一个保存文章的功能,如果采用函数编程的方式,大概会是下面这个样子: <?php function saveArticle($title, $content, $categoryId ...
- leetcode-163周赛-1260-二维网格迁移
题目描述: 自己的提交: class Solution: def shiftGrid(self, grid: List[List[int]], k: int) -> List[List[int] ...
- jsp EL运算符
算术运算符 算术运算符 说明 示例 结果 + 加 ${1 + 1} 2 - 减 ${1 - 1} 0 * 乘 ${1 * 2} 2 /或div 除 ${3 / 2} 1.5 %或mod 取余 ${3 ...