el-table的自定义行高设置

最新推荐文章于 2025-06-11 20:04:00 发布

吃不胖爹

最新推荐文章于 2025-06-11 20:04:00 发布

阅读量5.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43894292/article/details/134306586

vue 专栏收录该内容

36 篇文章

订阅专栏

文章讲述了如何调整ElementUI中的el-table行高和内边距，以解决内容显示不全的问题，通过设置row-style为最小行高和修改cell-style的padding值来实现更好的一页展示。

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

发生场景：

el-table默认的行高与padding，使原本在一页中不能完全呈现内容，所以需要自定义行高；单独的设置height会达到最小值，但还是和要求不符，所以修改了padding值，让默认的内边距减小，使内容更紧贴；

具体操作：

在el-table标签上，设置 :row-style=“{height: ‘0’}” 为最小行高，同时修改默认的padding值；让表格更好的展示为一页；

关键代码：

<el-table
    :data="tableData"
    border
    style="width: 100%"
    :row-style="{height: '0'}"
    :cell-style="{padding: '3px'}"
    :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
</el-table>