Element ui 表格高度无法调整高度

已于 2022-02-28 17:43:27 修改
阅读量1.1k 收藏
点赞数
分类专栏： element表格 文章标签： ui elementui vue.js
于 2022-02-28 17:37:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60364883/article/details/123187720
版权
这篇博客记录了在Vue2.0项目中使用ElementUI库创建表格时遇到的行高和表格高度调整问题。通过设置特定的CSS类，成功实现了表格样式自定义，解决了视觉效果不佳的问题。对于面临类似挑战的前端开发者来说，这是一个实用的解决方案。
摘要由CSDN通过智能技术生成

前言

这个项目是由Vue 2.0框架，使用element ui库写表格，找了好多办法一直无法将行高以及表格高度进行调整

直接上代码

CSS

这里需要设置一个表格class类

最终结果

用了这个就直接起飞，记录一下

宇六岁鸭
关注
专栏目录
Vue Element UI 完整版前端框架
07-31
Element UI 是基于 Vue.js 构建的企业级组件库，为开发人员提供了丰富的UI组件，如表格、按钮、提示、下拉菜单等，大大简化了网页界面的构建过程。这个"Vue Element UI 完整版前端框架"提供了完整的源码，意味着你...
监听element-ui table滚动事件的方法
10-17
在开发Web应用时，Element-UI 是一个常用的前端组件库，尤其在构建管理平台时，其丰富的表格（Table）功能非常实用。本文将详细介绍如何监听Element-UI的Table组件的滚动事件，以便在用户滚动到表格底部时动态加载更...
vue项目中element-tabel自动计算高度
qq_42483955的博客
05-11 2472
本项目是vue2，使用mixin混入方法计算出当前屏幕可供表格展示的高度。：页面上布局是头部-面包屑，中间-表格，底部-分页组件。需要使表格高度需要自适应屏幕。
element-ui 的 table 组件 无法设置行高的问题？
热门推荐
abcde158308的博客
05-15 1万+
element-ui 的 table 组件 无法设置行高的问题 因为需要改变table组件的 行高；试了好多方法；包括官方文档提供的方法cell-style，cell-class-name，虽然能加上样式但是没有效果，不知道啥原因，最后 发现 td 下面有个 class 为 cell 的div,于是修改如下 .cell{max-height: 94px !important;overflow:...
vue 项目 elementUI修改表格的高度
小肉包的博客
09-03 1612
vue 项目 elementUI修改表格的高度 elementUI table表格中 td单元格有一个默认的样式，padding使得表格中每一行都比较高 有时候我们需要根据自己的需求调整表格每一行的高度，就需要修改这个样式
element-ui表格表头高度不生效问题解决
最新发布
qq_42499848的博客
01-11 1325
本文主要记录element-ui、表格表头、表格标题栏高度设置为较小时无效的问题！通过:header-cell-style="{ ‘height’: ‘50px’}"方式设置element-ui表格表头高度为200px时可以生效，如下。.el-table .el-table__cell默认有12px的边距，将其设置为0即可。
vue elementui 强制修改行高度
weixin_44265800的博客
02-14 473
代码 <style lang="less" scoped> /deep/.el-table__body tr, /deep/.el-table__body td{ padding: 0; height: 40px !important;} </style> 效果
表格设置高度失灵
qq_45530512的博客
11-10 1027
检查表格或页面高度设置，若设置了具体值则会自动调整高度，那么手动设置就不会胜生效。 将页面高度设置为100%，则页面高度就会自适应，则界面就友好多了。
element ui表格设置动态高度
07-25
要在Element UI表格中设置动态高度，您可以使用以下步骤： 1. 在表格外部的容器元素上设置合适的高度样式，例如： ``` ;"> <!-- 表格内容 --> ``` 这样，包含表格的容器元素将具有固定的高度。 2. 如果您...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在本文中，将会详细探讨如何实现这一功能，并且提供动态监测浏览器高度来设置表格高度的解决方案。 ### ElementUI el-table元素的基础使用 ElementUI中的el-table元素提供了丰富的接口，允许开发者快速构建表格。...
Vue 自适应高度表格的实现方法
10-15
本文将详细介绍如何在Vue项目中，特别是在使用Element-UI库的情况下，实现自适应高度的表格。 首先，我们要理解Element-UI中的`el-table`组件。`el-table`提供了一个`height`属性，允许我们设定表格的高度。当数据...
ElementUI表格表头行高问题解决
世纪末的架构师的博客
08-28 6108
文章目录前言一、问题原因二、解决方法总结 前言 在最近一个项目的后台管理系统中，写前端界面时用到了ElementUI，但是发现导入数据表格之后表头的高度一直很高，如下图所示： 在网页上搜索了很多的解决办法，都没有作用。后来折磨了一段时间后解决了这个问题，在此进行记录。 提示：以下是本篇文章正文内容，下面案例可供参考 一、问题原因 在网页中检查代码时发现没有style来设置表格表头的高度，只有调整.el-main中的line-height属性时表头的高度才会发生变化。 原因是在主页面中用到了Cont
element表格自定义高度问题
ShawnWang22的博客
07-10 299
原因：如果不设置操作按钮区，整体单元格高度将会恢复正常，若加上操作单元格高度则会撑起。我们可以通过以下代码设置单元格高度，利用padding撑起来。无操作按钮时：单元格高度为23px。有操作按钮时：单元格高度为33px。
html（表格）设置了宽、高，却无效的问题
老洋
04-10 4313
1、背景 写html表格，常常容易忘记的一个点： 只对：行（各个字段）设置了（宽、高） ； 忘记了：给（表格）table标签，设置宽高 影响：（行、列合并时）， 会出现（宽、高）无效现象。 2、table标签：未设置宽高 当进行：行、列（合并时）出现效果如下： 3、table标签：设置宽高后 当进行：行、列（合并时）出现效果如下： 4、代码 4.1、未设置：table宽高代码 <!DOCTYPE html> <html lang="en"> <head
解决element-ui中多个table在tab切换时出现高度、宽度缩小的问题，适用所用情况
qq_36076928的博客
02-17 5277
在使用element-ui中的el-tabs组件进行切换时，出现tabs中的table高度、宽度变小，网上找的方案我觉得都不够完美，要么调用doLayout方法重新渲染，要么固定表头高度，使用起来有限制。 解决方法只需在全局样式中添加以下代码： .el-table { width: 100%; display: flex; flex-direction: column; .el-table__body-wrapper { flex: 1; } } 完美解决。 ...
el-table改变行高和样式
new_javabin的博客
05-16 1万+
最近在学习vue+elementUI前端框架，记录修改el-table行高和样式遇见的问题及解决办法。 1.方法一 使用官方文档修改样式属性（推荐） <el-table :data="topicList" :row-style="{height:0+'px'}" // 更改表格内容每一行的样式，注意直接写0px或'0px'没有效果 :cell-style="{padding:0+'px'}" // 更改表格内容每一单元格样式，注意直接写0px或'0px'没有效果 // 更改表头每一单元格样式
解决element ui无法修改height和padding
drhnb的博客
07-17 3101
当我使用element ui的布局容器组件时，想要修改height和padding，发现无法使用style样式不起作用 可以尝试用以下方法解决： 1、修改height，直接在el-header标签的行内修改
element-ui 表格如何自适应高度
m0_57071129的博客
11-10 7137
这里还有个需要注意的地方，就是修改下el-table的css，否则table会有很多留白，看起来体验不是很好。所以，我们需要加一个监听器即可，监听窗体大小变化，一旦变化就执行方法重新设定tableHeight。虽然这时候，已经可以根据窗体大小，高度动态变化，但是，还要每次刷新才行……，否则我们是修改不了 element自带的样式。自此，就能达到table高度自适应的效果啦~~
element-ui中的el-tab和el-table样式冲突导致table高度缩小
zby878的博客
01-03 1339
element-ui中的el-tab和el-table样式冲突导致table高度缩小
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宇六岁鸭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值