Element-ui table 行高更改

最新推荐文章于 2025-06-11 20:04:00 发布
原创 最新推荐文章于 2025-06-11 20:04:00 发布 · 1.1w 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element

本文介绍了一种简单快捷的方法来调整Element UI中el-table组件的行高，通过修改table的class名下td的padding值实现，同时也适用于表头th的设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

用了官方的row-style方法，没有反应，然后调试一下发现可以设置td的padding调节行高

方法如下：

1.给el-table 设置一个class名

2.修改这个class名下的td的padding值（默认是padding：12px 0）表头th也可以如此设置

这是目前我觉得最简单快捷的方法，如有更好的或者官方方法欢迎留言~~

 

「element-ui」el-table点击复选框或点击数据行，当前行高亮显示
拥抱AI Design
02-07 1182
本文主要介绍el-table点击复选框或点击数据行，当前行高亮显示。
vue修改th表头高度,宽度等问题
zjg
04-17 999
回到顶部记录工作心得,2020/8/21打卡。
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
elementUI——解决给table修改行高
m0_72590010的博客
05-10 5259
虽然是给每行修改高度，但实际是给单元格修改样式，难怪 row-style 对实际高度不起作用，原本的样式里面每个单元格都有 padding 值。一、给 el-table 添加 cell-style 属性。
el-table-v2修改表头、单元格、表格整体的宽度、高度样式
最新发布
weixin_66130560的博客
06-11 805
摘要：本文介绍了如何在Vue项目中优化Element Plus的虚拟表格(el-table-v2)样式与布局。主要包括：1）使用header-cell-props自定义表头样式；2）两种单元格样式修改方法（通过cell-props设置边框或直接在列定义中添加style）；3）利用el-auto-resizer实现表格自适应高度和宽度，外层需嵌套div设置calc(100%-60px)高度。代码示例展示了如何设置特定列的背景色、边框以及复选框交互功能，适用于需要自定义虚拟表格样式和响应式布局的开发场景。
element el-table 设置行高 和表头高度
小韩要快乐！
05-29 7572
第二种方式el-element-ui的方法。第一种方式 使用css。
el-table调整表头行高
balbalaijk的博客
07-25 2312
el-table样式布局调整
element ui 怎么调整table的行高
zheshihuahua的博客
07-15 3152
在Element UI中，调整Table的行高可以通过CSS覆盖默认的样式来实现。你可以为Table添加一个自定义类名，然后在CSS中指定。确保这段CSS被加载，行高就会按照你指定的值来显示。如果你使用了scoped样式，你可能需要使用深度选择器。element ui 怎么调整table的行高。来确保你的样式能够穿透组件边界。添加一个自定义的类名，比如。在你的CSS文件中，指定。在你的Vue组件中，给。
实习总结第七谈-----------vue中element-ui的表格行高怎么控制
zhangkegu的博客
01-03 2055
依旧在我负责的当前项目中举例子： 我的表格要求是一页只显示10条数据，且纵向不能产生滚动条，这样就意味着不能设置表格的整体高度来控制，那样会会产生滚动条，要么在表格纵向产生滚动条，要么在屏幕纵向产生滚动条，这时候我就想到了控制表格每一行的高度降低，就不会 十条数据就产生滚动条了，方法如下： 一：定义一个table表格的style 的回调方法，如图 该方法是element插件中的文档有的固定方...
详解element-ui表格中勾选checkbox，高亮当前行
10-16
首先，要实现勾选复选框高亮当前行的功能，我们需要利用Element UI提供的表格组件`<el-table>`。Element UI是一个基于Vue.js的组件库，提供了丰富的UI组件，用于构建高质量的用户界面。 接下来，文中提到了`...
element-ui 的列表动态拖拽修改列宽和行高
02-16
因为需求的不同，需要自己实现element表格拖拽调整列宽和行高，目前已实现，现记录了实现的方式。 实现说明：全部基于原生js,不依赖任何插件，可以直接使用。 实现思路：1.列宽的调整最终是通过调整如上图的col...
ElementUI table的行高设置
qq_41353397的博客
03-28 1998
<el-table :data="tableData" style="width: 100%" :row-style="{height: '80px'}" >
ElementUI table调整设置和行高设置
weixin_47498989的博客
04-18 670
这里的 @row_click 是点击整行数据 可以在handleRowClick里面设置跳转链接。row_style 是设置下面每个数据的行高。后端写前端table中遇到的一些小问题。
uView ui 1x uniapp 表格table行内容长度不一导致高度不统一而出现的不对齐问题
LlanyW的专栏
11-29 2281
重置td的高度：height:100% 改为height:auto!因为td单元格内空长度不定导致行单元格未对齐。
Layui如何使得table的固定列的高度于非固定列的高度一致
Effotzjw_小白慢慢踏全栈
12-19 2211
在加载table的done回调函数中，使用以下代码： //动态监听表头高度变化，冻结行跟着改变高度 $(".layui-table-header tr").resize(function () { $(".layui-table-header tr").each(function (index, val) { $($(".layui-table-fixed .layui...
＜ elementUi 组件插件： el-table表格拖拽修改列宽及行高 及 使用注意事项 ＞
热门推荐
一个平平无奇的技术宅
02-17 1万+
由于项目需求，需要给定原先使用的element列表新增一个列宽动态拖拽功能。结合在网上找到的资源，出一期 “ 使用事项 ” 及 使用过程中的问题汇总
Element ui 修改table表格行高
weixin_67271921的博客
03-10 4038
【代码】Element ui 修改table表格行高。
042：el-table表格表头自定义高度（亲测好用）
大剑师兰特的GIS世界
12-08 2695
vue项目中，我们需要在el-table中将表格表头的高度增大，这个问题很多小伙伴都遇到过，解决起来还真的不容易。博主经过一番探索，发现设置height之类的不管用，能解决问题的方法是设置好line-height。将这个值设高了，才能解决问题。具体设置请参考源代码
使用u-table/ux-grid虚拟滚动解决el-table数据量大渲染卡的问题、及表格根据浏览器大小动态调整高度问题
金乌的博客
06-13 7750
u-table的使用方法和el-table没什么区别。这里必须加的两个属性，不加的话无法实现虚拟表格，页面一样会卡死，第一个，use-virtual 开启虚拟滚动，第二，个 height 必须限制高度，这两个不加就是普通表格，加了之后就是虚拟表格。若想根据浏览器大小动态设置表格高度，可以通过vuex将屏幕大小的数据存储起来，通过监听屏幕大小，动态设置表格高度。新建umy-ui.scss文件，并引入。表格高度根据浏览器屏幕高度变化。
el-table 全局行高调整 ruoyi
05-14
### 调整 RuoYi 项目中 `el-table` 的全局行高方法 在 RuoYi Vue 项目中，如果需要调整 `el-table` 组件的全局行高，可以通过修改样式或者覆盖默认 CSS 来实现。以下是具体的方法： #### 方法一：通过 SCSS 变量覆盖 Element Plus 提供了一些可配置的 SCSS 变量来控制组件的外观。对于 `el-table` 的行高，可以修改以下变量： ```scss $--table-row-height: 48px; ``` 操作步骤如下： 1. 找到项目的 SCSS 文件入口（通常位于 `/src/styles/element-variables.scss` 或类似的文件）。 2. 添加或修改 `$--table-row-height` 的值以设置所需的行高[^1]。 例如，在该文件中加入以下代码： ```scss $--table-row-height: 56px !default; @import "~element-plus/theme-chalk/src/table"; ``` 此方式适用于希望统一调整整个应用中的表控行高的场景。 --- #### 方法二：通过类名覆盖样式 如果不希望通过 SCSS 修改全局变量，也可以针对特定表格单独设置样式。可以在 `<style>` 中添加自定义样式规则，覆盖 Element 默认的行高。 示例代码如下： ```vue <template> <el-table class="custom-table" :data="tableData"> <!-- 列定义 --> </el-table> </template> <style scoped lang="scss"> .custom-table { ::v-deep(.el-table__body tr) { height: 56px; /* 自定义行高 */ } } </style> ``` 在此例子中，`.custom-table` 类被用来标记目标表格，并通过 `::v-deep` 深度选择器覆盖内部 `.el-table__body tr` 的高度。 --- #### 方法三：动态绑定样式 当需要根据不同条件动态调整行高时，可以利用 JavaScript 动态绑定内联样式。例如： ```vue <template> <el-table :style="{ '--row-height': rowHeight + 'px' }" :data="tableData"> <!-- 列定义 --> </el-table> </template> <script> export default { data() { return { tableData: [], rowHeight: 56, // 定义行高 }; }, }; </script> <style scoped lang="scss"> .el-table { --row-height: 48px; /* 默认行高 */ .el-table__body tr { height: var(--row-height); } } </style> ``` 这种方式允许开发者灵活地根据业务逻辑改变行高。 --- ### 注意事项 1. 如果使用的是旧版本的 Element UI，则可能不支持某些新特性（如 CSS 变量）。此时需采用更传统的样式覆盖方案。 2. 需要确保引入的样式不会影响其他模块的功能和布局一致性。 ---
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值