ElementUI的Table组件在无数据情况下让“暂无数据”文本居中显示

最新推荐文章于 2024-07-09 17:01:29 发布
最新推荐文章于 2024-07-09 17:01:29 发布
阅读量5.2k 收藏 9
点赞数 4
分类专栏： element 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55336994/article/details/121243536
版权
本文介绍了如何解决表格在数据过多出现滚动条时，'暂无数据'内容随滚动滚动的问题。通过使用/deep/（或在Vue CLI 3中使用::v-deep）深度选择器，修改Element-UI的CSS，确保'暂无数据'内容在表格中始终居中显示。提供了一个具体的CSS解决方案，并展示了调整后的理想效果。
摘要由CSDN通过智能技术生成

出现表格数据过多至出现滚动条的情况，这个时候暂无数据时会出现显示的”暂无数据“随滚动滚动的情况，如下图，效果很不好。

在这里插入图片描述
什么办法可可以让暂无数据内容直接在表格中居中呢？这里用到/deep/ 深度选择器，修改element-ui的对应css

注:vue-cli-3中scss中可能无法识别/deep/用::v-deep代替！

::v-deep .el-table__empty-block {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}

效果图如下
在这里插入图片描述

尼给路达哟
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
eltable 无数据文案修改_ElementUI列表无数据提示问题
weixin_26841957的博客
12-29 2139
背景：VUE + Element-UI需求：列表无数据时的显示如下图1.png由于列表的列数过长导致有横向滚动条出现，希望暂无数据以及这个img能够显示在滚动条与表头之间。现状：目前的实现形式是将暂无数据的提示封装为一个组件，无数据时显示在滚动条的下方，如下图2.png解决思路：(1)修改el-table的源码，当data无数据时，按照我们需要的样子显示(2)在表头与滚动条之间动态的挂载和删除no...
ElementUi el-table 美化暂无数据状态
柒柒兮的博客
08-05 3031
前言：当表格数据过长的时候，会出现横向滚动条，这个时候暂无数据就需要拉动滚动条到中间才能看到，导致页面及其不美观，所有，请看下方 正常的空值状态如下 经过修改后 解决方法如下 <template> <el-table border :class="{ 'table': '', 'noScrol': tableText }" > //通过slot自定义空状态 <template v-slot:empty > <p :class="{'
38.1element,table常用功能，添加过滤图标,暂无数据等
weixin_47254130的博客
10-16 321
1.代码如下 ::v-deep .el-table__column-filter-trigger .el-icon-arrow-down { background: url("../../../../assets/base/img/sx.png") no-repeat; background-size: 100%; width: 17.4px; height: 14.7px; position: absolute;
el-table实现固定列，及解决固定列导致部分滚动条无法拖动的问题
askuld的博客
07-05 1143
当数据量动态变化时，可以为 Table 设置一个最大高度。通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。fixed属性：列是否固定在左侧或者右侧，true 表示固定在左侧；可选值：true, left, right。
element ui 样式优化小秘籍（table暂无数据居中...）
shikaixina的博客
11-30 365
element ui 样式优化小秘籍（table暂无数据居中，...）
nz-table的‘暂无数据’问题
weixin_42764602的博客
08-17 508
nz-table '暂无数据'
element-plus table 表格空数据时横向滚动条不触发问题
qq_34720531的博客
03-06 619
看看你的表格上是否有 estimated-row-height 这个属性。有这个属性 table 行高发生变化了 无数据时滚动条就不显示。
解决el-table表格没有横向滚动条
最新发布
weixin_49352307的博客
07-09 609
解决方法:每个column 中添加。表头数据过多,需要添加横向滚动条。
Element ui中table无数据时，在中间显示图片
djoiho的博客
03-24 2502
Element ui中table无数据时，在中间显示图片
基于ElementUI table组件修改，数据化表格结构，添加实用功能，快速生成表格.zip
06-17
在ElementUI Table组件中，我们可以利用数据结构的知识来优化表格的性能。例如，如果表格数据量庞大，可以考虑使用虚拟滚动技术，只渲染视口内的行，从而减少DOM元素的数量，提升页面性能。此外，还可以通过数据分页...
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页...
element-ui table 没有数据时 默认提示居中
qq_53474743的博客
10-28 564
/暂无数据提示 居中表示。
*el-table 暂无数据修改
weixin_47482311的博客
12-22 316
<div slot="empty"> <span>哈哈哈</span> </div>
(vue)el-table表头、内容居中
nyf_unknow的博客
07-07 2355
【代码】(vue)el-table表头、内容居中。
vue element ui 使用el-table 组件的时候，列使用fixed，表格滚动后出现错位
weixin_42539372的博客
04-17 7860
表格滚动之后fixed列和其他列出现如下错位的情况 在网上找了很多办法，doLayout也不起作用，给column设置：key="index+Math.random()"也不起作用,然后就用监听滚动条的方法写了： this.dom = this.$refs.multipleTable.bodyWrapper console.log(this.dom) this.dom.addEven...
element-ui 中的el-table表格默认的“暂无数据”修改
热门推荐
qq_41287158的博客
05-09 1万+
el-table中当无空数据时会默认显示一个“暂无数据”（附下图），那如果我们想要修改怎么办呢？怎么修改呢？ 解决办法如下： 只需要在el-tbale中的对应的插槽中写入你想展示的数据即可如下图： <el-table :header-cell-style="customHeaderStyle" :cell-style="customCellStyle" :size='customSize' stripe border >
解决 element-ui el-table表格组件先显示暂无数据 之后再加载数据的问题
weixin_42220130的博客
10-30 1804
解决办法：动态定义tablelist为空时候展示的内容，没有请求到数据之前显示为空，请求到数据但是数据本身就是空的再显示"暂无数据"项目中的表头和内容都是动态请求生成的，延时更久就会出现先闪一下（比闪一下更久）暂无数据，再显示正常界面的问题，用户体验会比较差。本文链接：https://blog.csdn.net/a1059526327/article/details/110374558。empty-text为table组件空数据时显示的文本内容，也可以通过slot="empty"设置。
Elementui中table组件暂无数据样式在屏幕中间
06-07
对于ElementUI的table组件，可以使用`show-empty`属性来设置是否显示暂无数据的样式。默认情况下，该属性的值为`false`，即不显示暂无数据的样式。如果要在屏幕中央显示暂无数据的样式，可以按照以下步骤操作： 1. 在table组件中添加`show-empty`属性，将其值设置为`true`。 ```html <el-table :data="tableData" show-empty> <!-- 表格列 --> </el-table> ``` 2. 在表格外层包裹一个div，并设置其样式为屏幕居中。 ```html <div class="table-container"> <el-table :data="tableData" show-empty> <!-- 表格列 --> </el-table> </div> ``` ```css .table-container { display: flex; justify-content: center; align-items: center; height: 100%; } ``` 这样就能够在屏幕中央显示暂无数据的样式了。同时，如果需要自定义暂无数据的样式，可以使用`empty-text`属性来设置显示的文本或HTML代码。 ```html <el-table :data="tableData" show-empty empty-text="暂无数据"> <!-- 表格列 --> </el-table> ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值