element ui中 el-tree、el-table组件加载数据前闪现 暂无数据 清除或修改

已于 2022-07-08 15:54:25 修改
阅读量3.8k 收藏 1
点赞数 3
文章标签： vue.js elementui
于 2022-07-08 15:51:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51688981/article/details/125679597
版权

我们在使用element ui组件时，  el-tree、el-table组件加载数据前会显示一个“ 暂无数据 ”，体验很不友好，我们可以将“暂无数据”修改为“正在加载中”或者直接清除；

利用el-tree 自带的empty-text属性绑定一个初始化空值，在发送接口请求前先赋值为“正在加载中”当拿到tree数据时判断数据长度，当数据长度为0时设置emptyText值为"暂无数据"即可

 

 

weixin_51688981
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
elementUI表格数据加载显示前先出现“暂无数据”字样问题
syx_cainiao的博客
09-20 2925
项目中的表格请求数据时，进去页面，先出现 ‘‘暂无数据’’ 字样闪现一下之后在进行加载数据，用户体验十分不好
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
主要介绍了在element-ui的el-tree组件中用render函数生成el-button 的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element table 暂无数据
qq_43427657的博客
06-12 1845
要实现如下图： 表格没有数据的时候显示： 暂无数据 添加empty-text属性即可 代码如下： 当然：文字可以自定义的
el-table 如何自定义暂无数据的样式
最新发布
前端笔记——放弃很容易,但坚持一定很酷
04-02 521
因为图片里已经包含了 “暂无数据” 的文本，所以不再设置。
element ui 样式优化小秘籍（table暂无数据居中...）
shikaixina的博客
11-30 300
element ui 样式优化小秘籍（table暂无数据居中，...）
Element Plus el-table 数据为空时自定义内容【默认为 No Data】
May21☀️
08-18 3653
【代码】Element Plus el-table 数据为空时自定义内容【默认为 No Data】
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
amoureux555的博客
10-12 694
vue2 修改elementui 表格table 为空时暂无数据
Element Plus el-table 查询中、数据为空自定义‘暂无数据’修改
古之成大事者，不惟有超世之才，亦必有坚韧不拔之志
10-13 2018
-查询中： 重写覆盖查询文案: 需要为空也要重写，不写即使用默认文案‘暂无数据’ -->description="暂无数据"-- 查询结束 -->一、Element Plus。同理 插槽使用不一样。
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
主要介绍了Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2.0 + element UI 中 el-table 数据导出Excel的方法
11-28
1、安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用，请移步github。 ...2、组件里头引入 import FileSaver from 'file-... /* generate workbook object from table *
解决 element-ui el-table表格组件先显示暂无数据 之后再加载数据的问题
weixin_42220130的博客
10-30 1585
解决办法：动态定义tablelist为空时候展示的内容，没有请求到数据之前显示为空，请求到数据但是数据本身就是空的再显示"暂无数据"项目中的表头和内容都是动态请求生成的，延时更久就会出现先闪一下（比闪一下更久）暂无数据，再显示正常界面的问题，用户体验会比较差。本文链接：https://blog.csdn.net/a1059526327/article/details/110374558。empty-text为table组件空数据时显示的文本内容，也可以通过slot="empty"设置。
elementui-plus el-tree组件数据不显示问题解决
fury的博客
11-07 1745
对比以后发现是template中的#default='{data}'没有写大括号导致的。注意看右侧的树是没有文字的,数据已经渲染,个数是对的,但就是没有文字,
mvc 路由增加文件夹名_vue路由及组件
weixin_39724004的博客
11-23 278
继续搞Vuejs的前端，在之前我已经在Windows系统上配置好了一个初始的vue-cli页面，目前我需要做的工作，就是开始写代码，学习增删页面，加入输入框按钮什么的。另外希望能尽快学会如何通过API取数据，感觉上，能学会这些东西，就能达到一项技术2/8原则里边那个8了。为了实现这个目的，我上网看了一系列的博客教程，照着抄了很多代码，最后都没办法用。我怀疑原因可能是大家用的版本不一样，感觉上Vue...
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 >
vue+element-ui 数据加载前loading效果
weixin_43173924的博客
06-21 1万+
我是按照下面链接做的 https://www.jianshu.com/p/304c665478b8 https://biigpongsatorn.github.io/#/vue-element-loading 效果图如下：
Element-ui中 el-cascader 最后一级数据为空显示暂无数据问题
preoccupied_的博客
05-04 688
原因是最后一级的children数据为空。
vue 更改element-ui中el-table默认的暂无数据样式
热门推荐
前端小菜鸡的博客
07-01 2万+
很简单，加上这样一串代码ok! <template slot="empty"> 会员可以点击查看历史竞品查看 <!-- <img class="data-pic" src="#" alt="" />--> //这里还可以加上你想要的图片样式 </template&......
element-ui el-tree
08-09
Element UI的el-tree是一个用于显示树状数据的组件。关于el-tree的样式，可以在代码中添加一些自定义的样式来改变树的显示效果。在引用中的样式示例中，通过添加样式对树的节点、竖线、横线等进行了调整和美化。 在使用el-tree时，可以通过添加node-key属性给每个树节点指定一个唯一的标识符，以实现树节点的查找、选中等操作。这个属性可以通过在代码中添加node-key="id"来指定。可以参考引用中的示例代码。 要在项目中引入Element UI的样式和组件，需要在主文件（主要是main.js）中添加相应的引入语句。如引用所示，需要先引入Element UI的样式文件，然后通过Vue.use(ElementUI)来注册Element UI的组件。 总结起来，如果要使用element-ui el-tree组件，需要在代码中添加el-tree标签，并设置相应的属性，如node-key属性。同时，在样式方面，可以根据需求在代码中添加自定义的样式来美化el-tree的显示效果。要使用Element UI的样式和组件，需要在项目的主文件中引入Element UI，并注册相应的组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值