Vue -- 如何固定 el-table 的表格高度

最新推荐文章于 2025-03-05 17:48:48 发布
最新推荐文章于 2025-03-05 17:48:48 发布
阅读量6.2k 收藏 2
点赞数
文章标签： flex relative 动态伸缩表格高度 el-table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38645718/article/details/111503712
版权
本文介绍如何在Vue中使用el-table组件实现表格高度固定，即使数据不足也能保持特定高度，利用flex和relative布局实现动态伸缩效果。

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

<div id="tabContainer" style="height:100%;width:100%;">
	<el-table :data="infoTableData" :cell-style="{padding:'8px 0px 8px 0px'}" ref="infoTableData" border highlight-current-row  :height="tableHeight">
最低0.47元/天 解锁文章
Vue实战指南：Vue项目中el-table表格表头自定义高度
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-09 2036
基本概念和作用说明el-table 组件概述表头高度的作用示例一：使用CSS样式自定义表头高度示例二：使用scoped样式局部自定义表头高度示例三：通过插槽自定义表头内容示例四：动态设置表头高度示例五：使用第三方库调整表头高度实际开发中的使用技巧在Vue项目中，使用Element UI的el-table组件可以轻松创建功能丰富的表格。然而，默认情况下，el-table的表头高度是固定的，这在某些场景下可能不够灵活。本文将详细介绍如何自定义el-table。
【el-table】表格要求内容固定高度，使用原生给计算高度
wujiezhiwei的博客
04-27 666
<template> <div class="content"> <div class="content-div-style"> <searchCom @searchChildFun="searchChildFun" ref="searchChildFun"></searchCom> <div class="table-div-project"> <div class...
element table 表头固定,表格高度自适应
weixin_42342065的博客
12-15 845
element table 表头固定,表格高度自适应
el-table 固定表头，固定列，动态高度，最简单的办法
m0_60093269的博客
09-16 5781
Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
vue Table 表格自适应窗口高度，表头固定
最新发布
先完成，再完美—60分比0分强100倍
03-05 674
vue 当表格内纵向内容过多时，可选择固定表头。
el-table设置固定高度
W8034的博客
04-27 4936
:row-class-name="'rowStyle'"//el-table标签里 :row-style="{ height: '48' }" //el-table标签里 /deep/ .admin-table .rowStyle { height: 48px; line-height: 48px; } /deep/ .admin-table .el-table td { padding: 0; }
el table 固定表头和首行_element table固定表头，表的高度自适应解决方法
weixin_39757040的博客
12-22 1372
主要是通过在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应。标签：第一种JS处理方式：export default {data(){return {tableHeight: 50,tableData: []}},mounted:function(){setTimeout(() => {this.tableHeight = window.innerHeight ...
vue table固定高度（数据超出表格）
csdndd521的博客
04-24 2956
<el-table :max-height="chartsH"> export default{ data(){ return{ chartsH: document.body.clientHeight - 680 + 'px', } } }
el-table设置固高
string佳佳的博客
08-01 3724
<el-table :data="tableData1" :height="550+'px'" style="width: 100%"> <el-table>
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在这个例子中，`height="250"`是固定高度的设定，它意味着表格的最大高度为250像素，超出了内容将会出现滚动条。 ### 自适应高度的实现 为了使表格能够自适应浏览器窗口的高度，你可以使用Vue的响应式数据绑定功能...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
在Vue2.0结合ElementUI2.0的项目开发中，常常会遇到表格列数不固定，需要根据数据动态渲染的情况。本篇文章将详细介绍如何实现`el-table`的循环动态列渲染。 首先，ElementUI的`el-table`组件通常通过`<el-table-...
vue el-table实现行内编辑功能
10-15
在Vue.js中，Element UI库提供了丰富的UI组件，其中`el-table`是用于展示表格数据的一个强大组件。本文将详细讲解如何在Vue项目中利用Element UI的`el-table`实现行内编辑功能。 首先，我们需要在`el-table`的表头...
element-ui表格el-table固定表头，统一控制行高
Mark的博客
03-11 6791
log: 1.固定表头增加height 2.表格数据内容太大导致行高不统一，如下代码处理行高统一为40px 组件： <el-table class="tableClass" :data="formData.result" border height='350' width='500'> <el-table-column v-for="key in formData.listkey" :key="key" :prop="key" :label="key"> &
el-table的自定义行高设置
热门推荐
Sunshine_Jian的博客
03-21 2万+
发生场景： el-table默认的行高与padding，使原本在一页中不能完全呈现内容，所以需要自定义行高；单独的设置height会达到最小值，但还是和要求不符，所以修改了padding值，让默认的内边距减小，使内容更紧贴； 具体操作： 在el-table标签上，设置:row-style="{height: '0'}"为最小行高，同时修改默认的padding值；让表格更好的展示为一页； 关键代码： <el-table :data="tableData" border...
ElementUI表格el-table表头固定自适应高度解决方案
携手天下
10-23 8311
ElementUI表格el-table表头固定自适应高度终极解决方案： https://wintc.top/article/54
el-table高亮某一行， el-table给某一行设置特殊的样式
木木木华的博客
02-23 4946
el-table高亮某一行， el-table给某一行设置特殊的样式
el-table-column设置高度/指定高度
hhmmj的博客
05-10 6344
给el-table-column设置高度。解决方案：在标签设置:row-style。
element表格固定高度
不同场景下的水平居中
07-16 2598
需求描述：表格内容多，不使用分页，只在表格内容区域滚动，去掉滚动条，去掉滚动条 复现及解决方法： 固定表格高度 .el-table { height: calc(100vh - 630px); } 出现滚动条： 去掉滚动条 // 隐藏el-table的滚动条 (表格固定高度时，会出现滚动条) /deep/.el-table .el-table__body-wrapper::-webkit-scrollbar { width: 0px; /* 宽度为0隐藏 */ } 出现问题： 1）右
elementui——el-tabs固定高度&内容超出高度可滚动条
HD243608836的博客
10-13 5604
el-tab-pane是每一个tabs内容的容器，这这里设置的高度才是跟屏幕高度一样的。不需要配置“class=...”，也不需要配置.el-tabs–card是外层。
vue-seamless-scroll和el-table
09-28
vue-seamless-scroll是一个Vue插件，用于实现无缝滚动效果。...全局安装时，可以使用Vue.use(scroll)将...它与vue-seamless-scroll是两个不同的组件，vue-seamless-scroll用于实现滚动效果，而el-table用于展示表格数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值