element-ui 的 table 组件 无法设置行高的问题？

最新推荐文章于 2026-04-22 07:40:24 发布
原创 最新推荐文章于 2026-04-22 07:40:24 发布 · 1.6w 阅读 · 9 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一种解决 Element-UI 中 table 组件行高无法自定义的问题的方法。通过直接对 .cell 类进行样式修改，可以有效地调整表格行的高度。

element-ui 的 table 组件 无法设置行高的问题
因为需要改变table组件的 行高；试了好多方法；包括官方文档提供的方法cell-style，cell-class-name，虽然能加上样式但是没有效果，不知道啥原因，最后 发现 td 下面有个 class 为 cell 的div,于是修改如下
.cell{max-height: 94px !important;overflow: auto !important;}
经测试成功

vxe-table 中自定义模板，解决渲染单元格为 element-ui 组件后无法选中值
我的博客
12-17 1万+
vxe-table 中自定义模板，渲染单元格为 element-ui 组件如何解决跨组件之间的事件冲突例如以下代码解决方法 如何解决跨组件之间的事件冲突 vxe-table 强大之处就是可以支持任意的 vue 组件，但在渲染大部分组件后默认是无法直接使用的，需要解决好跨组件之间的事件冲突 例如以下代码 虽然可以正常渲染和显示，但是会无法选中下拉选项，这就是跨组件的事件冲突，下面会提到解决办法 &l...
el-table设置表格高度无效
qq_45325025的博客
08-19 4133
我的项目表格的列，是请求后台后，拿到数据才进行渲染的，也就是动态的，所以在项目中遇到，即使我设置了表格高度，渲染出来的表格高度依然没有高度，但是只要我屏幕缩放，高度就会生效。el-table__body-wrapper自适应失败，网上说是element的bug，改变思路，在element官方文档中发现了如下方法。明明下方有空白，但是table只能显示一部分，但是屏幕一缩放，高度就恢复了，打开控制台发现。每当调用获取table数据的方法后调用一下。当获取数据后，对table进行重新渲染。
如何使用Element UI Table组件构建企业级数据可视化解决方案
最新发布
gitblog_00184的博客
04-22 1003
Element UI是一个基于Vue.js 2.0的Web UI工具包，其中的Table组件是企业级数据可视化的核心解决方案。它提供了丰富的功能和灵活的配置选项，帮助开发者快速构建专业的数据表格。 ## 🌟 Element UI Table组件简介 Element UI Table组件（`el-table`）是一个功能全面的数据展示组件，支持排序、筛选、分页、单元格编辑等多种功能。它的设计遵
el-table改变行高样式不生效的解决办法
weixin_44953664的博客
12-12 3922
各种方法都试过了，直接上样式生效代码：必须是+‘px’,这样不会报错。
html（表格）设置了宽、高，却无效的问题
无
04-10 4896
1、背景 写html表格，常常容易忘记的一个点： 只对：行（各个字段）设置了（宽、高） ； 忘记了：给（表格）table标签，设置宽高 影响：（行、列合并时）， 会出现（宽、高）无效现象。 2、table标签：未设置宽高 当进行：行、列（合并时）出现效果如下： 3、table标签：设置宽高后 当进行：行、列（合并时）出现效果如下： 4、代码 4.1、未设置：table宽高代码 <!DOCTYPE html> <html lang="en"> <head
element管理系统记录问题/表格行高自定义/左侧导航菜单问题
iseyre的博客
08-31 478
目录el-table表格行高自定义 问题：左侧菜单展开时有滚动条无法去除单独给某一项 去除导航菜单右侧的箭头或指定某个iconelement导航菜单可根据路由高亮、刷新页面自动定位并展开上一次点击的地方、页面刷新不丢失 :row-style="{ height: '62px' }" :cell-style="{ padding: '0px' }" 解决：左侧菜单固定高 el-menu设置和背景一样的border 单独给某一项 去除导航菜单右侧的箭头或指定某个icon 注：如果指定某个icon
关于Element-ui中Table表格无法显示的问题及解决
Ultravioletrays的博客
06-28 1万+
今天在书写代码时遇到的问题，el-table在页面中突然显示为空白，检查了甚至重复粘贴的几次官网代码都不行，后来在网上查阅了相关资料，解决了问题。问题就出现在此步骤：在浏览器输入url，回车后，浏览器空白，什么都不显示。注意：原来项目中的element-ui版本是2.13.0，上图显示的是我重新安装的element-ui依赖版本号。最终找到问题的根源是element-ui依赖版本太高，换一个低版本的依赖即可。element-ui的依赖版本过高所导致的，将其该成低版本即可，亲测可用。(1)在package.
element-ui表格表头高度不生效问题解决
qq_42499848的博客
01-11 2230
本文主要记录element-ui、表格表头、表格标题栏高度设置为较小时无效的问题！通过:header-cell-style="{ ‘height’: ‘50px’}"方式设置element-ui表格表头高度为200px时可以生效，如下。.el-table .el-table__cell默认有12px的边距，将其设置为0即可。
elementUI——解决给table修改行高
m0_72590010的博客
05-10 5657
虽然是给每行修改高度，但实际是给单元格修改样式，难怪 row-style 对实际高度不起作用，原本的样式里面每个单元格都有 padding 值。一、给 el-table 添加 cell-style 属性。
解决element ui无法修改height和padding
drhnb的博客
07-17 4277
当我使用element ui的布局容器组件时，想要修改height和padding，发现无法使用style样式不起作用 可以尝试用以下方法解决： 1、修改height，直接在el-header标签的行内修改
ant design vue的table行高调整
热门推荐
lee_amazing的博客
10-27 1万+
在运用ant design vue的table表格时，觉得行高间距有点大，通过检查发现是padding撑起来了，但是研究一段时间发现使用customRow属性的回调函数改变padding没有效果。 然后就可以选择最简单粗暴的直接修改对应的样式，通过检查找到行高样式的css，直接来个/deep/修改，成功了改变了padding压缩了行高。 //直接在style中添加样式 //这样使用会使得当前页面所有的table表格行样式都会改变 //如果想要调整表头的行高，可以把下面的td改成th //调整body行属性
vue element表格某一列内容过多，超出省略号显示
it小白的博客
10-12 8273
在使用element组件库里面的table组件时，遇到某一个字段内容过多，导致td高度被撑开，布局显得很不美观，像这样这时我们只要给table-cloumn添加一个属性show-overflow-tooltip，12345实现超出隐藏，并有提示，这样的话会有下面效果：提示的长度特别长，超出了屏幕，不太好看。可以在处理下样式，如下：12345678910。
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 表格高度无法调整高度
weixin_60364883的博客
02-28 1262
前言 这个项目是由Vue 2.0框架，使用element ui库写表格，找了好多办法一直无法将行高以及表格高度进行调整 直接上代码 用了这个就直接起飞，记录一下
element table max-heitght失效解决办法
joy_1004的博客
12-04 1901
elementui文档里是在table中使用max-height控制流体高度 但是最开始使用有效果，之后再点开就卡死报错 所以改成这样 table上加入样式 .el-table-filter { max-height: 300px; overflow: auto; margin-top:20px; box-shadow:0 0 0!important; } ...
el-table固定表头（设置height）出现内容过多时不能滚动问题
qq_42192641的博客
11-17 2839
解决：加一个div并设置其高度和overflow。主要原因是el-table没有div包裹。
element-ui中，el-table单元格行高解决不能再缩小的问题
weixin_63896561的博客
10-08 1308
el-table
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值