无数据时给el-table添加一个高度

最新推荐文章于 2025-05-08 11:11:35 发布
原创 最新推荐文章于 2025-05-08 11:11:35 发布 · 3.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #javascript #vue.js #前端

无数据时给el-table添加一个高度(不影响有数据时所设置高度)

	.el-table__empty-block { // Element自带类名
      height:550px;
      border:none;
    }

语录分享

Vue 复杂json数据在el-table表格中展示（el-table分割数据）
一碗清深的博客
07-22 2930
一条复杂的json数据在el-table表格该怎么做展示？json数据最外层有4个数组，也就说一个el-table-column要分割成4个数据。
el-table
qq_46551351的博客
10-17 950
vue + element ui - table 组件
vue中，el-table无数据（空数据）时，进行暂无数据的文本内容设置之具名插槽#empty（v-slot=empty）和empty-text
weixin_44867717的博客
05-15 4551
在表格空数据时显示的文本内容，也可以通过。设置，来展示【暂无数据】
el-table解决数据过少小于高度有留白的问题
请叫我欧皇！的博客
11-13 1596
问题:给el-table设置个高度,高度为500px,之后就添加如下4条数据,那么底部就没数据,直接就空白了,本文章就是为了解决这个问题,如果底部留白那么就添加几条空数据就行了.如果数据已达到高度了那么就不会留白了。
动态计算el-table高度
最新发布
qq_50879110的博客
05-08 470
form、搜索框、底部导航栏设置class。mian.js 引入全局。
【记录】element Plus table设置了height=100%时，当数据为空时，table高会出现无限变大的情况
陈铭杰的博客
02-28 1120
当table设置了height100%，而tableData又是空的时候，会出现height无限自动增大。造成此问题的原因，应该是table高100%没有绝对定义相对那个元素的高。正常情况是height会固定不变了，只有tableData为空时才会出现。
element-ui中，el-table单元格行高解决不能再缩小的问题
weixin_63896561的博客
10-08 1203
el-table
(vue)el-table表格最小/自动高度设置
nyf_unknow的博客
01-11 3993
【代码】(vue)el-table表格最小/自动高度设置。
改变el-table宽度
12-12
在给定的场景中，开发者想要实现一个功能，即允许用户通过拖动表格列宽来调整列的宽度，并将这些自定义设置保存到浏览器的localStorage中，以便在用户下次访问时恢复这些设置。这个功能可以提供更好的用户体验，让...
Debug-029-el-table实现自动滚动&分批请求数据
LM0916的博客
10-16 1668
最近做了一个小优化，还是关于展示大屏方面的。大屏中使用el-table展示列表数据，最初的方案是将数据全部返回，确实随着数据变多有性能问题，有时请求时间比较长。这里做的优化就是实现列表的滚动到距离底部一定高度时再次请求接口数据，实现分批请求提升性能。然后这里也实现让el-table自动滚动的功能。
el-tree结合el-table，树形添加修改操作
SDAW_1的博客
07-04 2003
。。。。。。。。。。。。
修改el-table行高
dd_lcdw的博客
01-12 6592
1. 设置表格第一列背景颜色2.设置单元格高度。
修改elementUI组件库的单元格高度
兜兜的博客
04-22 1569
修改elementUI组件库的单元格高度
Vue 修改el-table无数据时的样式
qq_37213573的博客
09-24 1018
加上这一串代码就行啦！！！！！ 具体代码： 参考： https://blog.csdn.net/weixin_44143512/article/details/94402565
有关vue项目布局，如何实现左右内容各自滚动自己的，table为空时候撑满高度
qq_43468165的博客
05-03 4563
布局就是使用了ant design vue里面常用的布局ant design vue布局， 1.想要实现左右侧各自滚动自己的，首先就应该让最大的盒子#app的overflow为hidden，这一步是防止页面内容超出后，浏览器页先出现了滚动条。 再给左侧的菜单设置单独滚动 菜单的设置很简单。主要难点在右侧，内容上。 2.在右侧内容的包裹布局上利用监测浏览器窗口变化，来影响内容区域的宽窄变化。（我有尝试过不监听，但是页面总是，扩大页面宽度时候，内容随之撑开，但是缩小的时候没有...
如何让Ant ＜a-table＞的高度自适应屏幕的高度/（table内容滚动条)
mkijnbgt的博客
09-08 9058
如果是插件自带的标签样式，就找到指定的标签样式 进行定义 在标签找对的情况下如果不生效是没有附加上样式，需要加一个.....
vue3 + ts，element-plus中el-table，使用自定义指令自适应表格高度
Just_Maybe的博客
01-26 1358
【代码】vue3 + ts，el-table，dom元素，使用自定义指令自适应高度。
element-ui el-table表格高度自适应
u014197593的博客
12-18 8954
vue包含一些官方指令，比如v-if、v-for、v-html、v-show等等。那如何创建一个属于自己的指令呢？自定义指令有两种，一种是全局的，一种是局部的，我这里只讲解全局的。
element-ui table 没有数据时 默认提示居中
qq_53474743的博客
10-28 881
/暂无数据提示 居中表示。
el-table行无数据高度问题
03-27
### 解决方案 在 `element-ui` 的 `el-table` 组件中，如果表格没有数据，默认情况下可能会出现多余的空白区域或者高度不一致的情况。可以通过以下方式来解决这个问题： #### 方法一：通过 CSS 设置固定高度 可以为 `.el-table` 添加固定的样式，使其无论是否有数据都能保持相同的高度。以下是实现代码： ```css .el-table { height: 300px; /* 根据实际需求调整 */ } ``` 这种方法适用于希望表格始终占据一定空间的场景[^1]。 --- #### 方法二：动态控制容器高度并隐藏多余空白 对于更灵活的需求，比如只有在无数据时才隐藏空白区域，则可以在父级容器上应用条件渲染逻辑。例如，在 Vue 中使用 `v-if` 或者 `v-show` 来判断数据是否存在，并相应地修改样式。 HTML 结构如下： ```html <div :style="{ display: data.length ? 'block' : 'none', height: data.length ? '' : 'auto' }"> <el-table :data="data" style="width: 100%"> <!-- 表格列配置 --> </el-table> </div> ``` CSS 配置： ```css .no-data-container { height: 300px; background-color: #f5f7fa; text-align: center; line-height: 300px; font-size: 14px; color: #909399; } ``` 此方法能够有效避免无数据时的空白问题，同时提供更好的用户体验[^2]。 --- #### 方法三：利用插槽自定义无数据提示内容 Element UI 提供了一个名为 `empty` 的插槽，用于定制当数据为空时展示的内容。这不仅可以美化界面，还可以进一步优化布局效果。 示例代码： ```vue <el-table :data="tableData" style="width: 100%; min-height: 300px;"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <template #empty> <div class="no-data-tip">暂无数据</div> </template> </el-table> ``` 配合 CSS 定义： ```css .no-data-tip { padding-top: 80px; font-size: 16px; color: #ccc; text-align: center; } ``` 这种方式不仅解决了视觉上的冗余感，还增强了交互友好度[^3]。 --- ### 总结 以上三种方法分别针对不同场景提供了解决方案。可以根据具体业务需求选择适合的方式实施。无论是静态设定还是动态处理，都可以显著改善用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值