数据加载等待 elementUI + vue

最新推荐文章于 2025-01-07 16:23:24 发布
最新推荐文章于 2025-01-07 16:23:24 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端交互 vue ElementUI 文章标签： vue 交互优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liujiebahuang/article/details/108165363

数据在加载过程中页面显示空白会让用户感到焦虑烦躁，加一点小动态可以解决这种问题。
在这里插入图片描述
在这里插入图片描述
v-if控制页面三种状态：1、加载中；2、加载无数据；3、展示数据
isloading true加载icon显示, false隐藏，初始true
hasdata true无数据icon显示，false隐藏，初始false

isloading:true
数据初始
数据请求成功,Dom加载完成
isloading:false
有数据长度hasdata:true
没数据长度hasdata:false
结束/页面数据展示

其实我就是想玩一下甘特图

SpringBoot + MyBaits+ Vue + ElementUi简单的数据流传递(从0开始搭建)
muziiiii的博客
05-04 2108
SpringBoot + MyBaits+ Vue + ElementUi简单的数据流传递(从0开始搭建)
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9346
未完
vue 实现element-ui中的加载中状态
01-18
需要添加加载状态，调用下面方法即可 //开启loading const load = _this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); //关闭loading load.close(); 补充知识：在vue中使用element-ui 里面的按钮点击后显示加载中，防止重复提交 第一步： 第二步： 第三步： 效果 以上这篇vue 实现element-ui中的加载中状态就是小编分享给大家的全部内容了，希望能给大家一个参考
三大元素等待
weixin_41202670的博客
10-29 290
强制等待 隐式等待 显式等待
element loading全局等待加载效果
qq_59224836的博客
08-22 397
element loading全局等待加载效果
Vue使用elementUI按需加载
qq_41429765的博客
06-13 282
第一步: npm i element-ui --save 或yarn add element-ui 第二步: 在main.js中引入element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' //引入样式 Vue.use(ElementUI)
推荐开源项目：Vue-Wait - 强大的异步加载等待组件
gitblog_00049的博客
04-19 513
推荐开源项目：Vue-Wait - 强大的异步加载等待组件 vue-wait项目地址:https://gitcode.com/gh_mirrors/vu/vue-wait 是一个专为 Vue.js 应用设计的强大且灵活的全局等待/加载指示器组件。它可以帮助开发者优雅地处理应用中的异步操作，为用户提供流畅的交互体验。 项目简介 Vue-Wait 提供了一套完整的解决方案，用于管理你的 Vue 应用...
Vue+TypeScript+ElementUI 实战 （一）项目搭建
军火库
06-20 949
官网： nodejs.org/en/ （双击下载文件，一路 next 即可）注： 推荐下载最新稳定版安装完成后分别输入命令 和 查看 node 版本与 npm 版本 （2）npm存在的缺点 速度慢：npm 按照队列执行安装每个 package，只有当前 package 安装完成之后，才会进行后面的安装。同一个项目，npm 安装的时候无法保持一致性，由于 package.json 文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义： npm 安装的时候，一个包抛出错误，npm 会继续下载安
【VUE+ElementUI】通过接口下载blob流文件设置全局Loading加载进度
sunshineTing2的博客
01-07 639
下载Blob流文件，并以服务形式显示文件下载进度
mock+vue-cli+element-ui完成数据模拟及表格数据分页
weixin_41788705的博客
11-10 2839
在本节中，将讲述如何从零开始搭建mock+vue-cli+element-ui数据表格
Vue-Element-UI 按需加载使用
coder-itl
03-04 725
Vue-Element-UI 按需加载使用 创建vue项目 vue create project-name 项目创建 安装Element-UI 官网https://element.eleme.cn/#/zh-CN/component/installation 项目安装element-ui vue add element 基础项选择 基础项目选择 使用最新创建的项目会自动创建plugin/element.js import V
c3等待加载样式 vue_Vue.js__简易加载等待动画
weixin_39633090的博客
01-14 255
Vue.js__简易加载等待动画Vue实现为览或讲琐了过自系一读页围这就多网解元当维自加，加载动画的样式取自其他出处，侵直分调浏器代，刚求的一学础过功互有解小久宗点差维含数删。将Vue属性览或讲琐了过自系一读页围这就多网解元当维和方法复制到自己页面即可使用，注意调直分调浏器代，刚求的一学础过功互有解小久宗点差维含数试。Title*{margin: 0;padding: 0;}body{/* ...
react之模仿elementui的v-loading（加载）功能；react 添加等待加载功能；
仙途路漫漫其修远兮
12-02 1006
1. element-ui（vue的ui框架）的v-loading方法感觉非常棒，于是在react中实现一个类似的功能； 2. 功能使用介绍：函数接受两个参数，第一个是HTML或者组件，第二个为当前是否是加载中。根据切换第二个参数实现加载等待效果！ 3. 功能实现介绍：对传入的组件component.props.children进行操作，在其中添加进需要添加的加载功能代码（自定义加载），使用绝对定位的形式（不要加top、bottom、left、right）。
element 的loading,加载
weixin_42206375的博客
05-06 1243
通常elementUI框架都是全局引入项目,自然就包括loading Vue.use(ElementUI, { size: ‘medium’ }) 这是用在页面中就用this.loading的属性使用很简单,element官网上就用说明,但是取消loading状态,官网上就说的有点模糊,对于这种全局引入element的项目来说使用,需要给一个实例给this.loading的属性 使用很简单,element官网上就用说明,但是取消loading状态,官网上就说的有点模糊,对于这种全局引入element的项目来
vue 一直显示数据加载中的解决方案之一
热门推荐
让优秀成为一种习惯
04-08 1万+
现象描述 当页面加载的时候，一直显示“数据加载中”的loading。 解决方案之一 出现这样的原因，可能是该页面同时在加载两个或者两个以上的api数据请求，即多次调用后台接口。 解决思路： 同步执行，即是一个方法接一个方法的执行。 示例 （一）一直出现 数据加载loading 示例代码： mounted() { this.bug1(); this.bug2()...
vue+elementUI 加载中-处理
九九八拾一的博客
07-19 3060
vue+elementUI 加载中-处理 根据常规vue项目的表格数据加载逻辑，表格数据生命周期为： 加载前TableData:[] 加载中 el-table已根据TableData初始化出 “空表格” 加载后 el-table根据绑定的最新数据 生成 包含数据的表格。 结果：导致页面先显示 暂无数据，然后在数据加载完成后显示正常数据，造成逻辑错误。 解决方案： 在“表格加载”的生命周期过程中，修...
vue给页面添加‘加载中’------ loading
m0_66352359的博客
01-22 1133
vue添加 loading
vue 使用element-ui Loading框加载
阿威的博客
06-01 2390
vue 使用element-ui Loading框加载 在vue/cli项目上使用 在想要用到的事件上定义方法 代码片. //定义方法 let loading function startLoading() { loading = Loading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.7)' }) } function endLoading() { loading.close() } 在项目上调用方法 代码
ElementUI获取子组件验证结果
李刚的学习专栏
03-07 7198
最近项目中遇到父组件需要获取子组件（表单）的验证结果的需求，特整理如下： ​ 尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，...
elementui dialog弹框加载速度慢
最新发布
01-08
### 提高ElementUI `el-dialog` 组件加载速度的方法 为了优化 `el-dialog` 的性能，可以采取多种策略来减少不必要的资源消耗并加快响应时间。 #### 1. 按需引入组件 仅导入实际使用的 ElementUI 组件而非整个库能够显著减小打包后的文件大小。这不仅减少了网络传输的数据量，还降低了浏览器解析和执行 JavaScript 的负担[^1]。 ```javascript // main.js 或入口文件中按需引入所需组件 import { Button, Dialog } from 'element-ui'; Vue.use(Button); Vue.use(Dialog); // 替代方案：使用 babel-plugin-component 自动化处理 ``` #### 2. 使用懒加载技术 对于不经常展示的内容（如模态框），可以通过动态 import 实现懒加载，在首次访问时才下载相应模块。这样可使初次页面加载更快[^4]。 ```javascript <template> <div> <!-- 动态加载对话框 --> <button @click="showDialog">Show Lazy Loaded Dialog</button> <component v-if="isLoaded" :is="lazyComponent"></component> </div> </template> <script> export default { data() { return { isLoaded: false, lazyComponent: null }; }, methods: { async showDialog() { this.lazyComponent = await import('@/components/MyLazyDialog.vue'); this.isLoaded = true; } } }; </script> ``` #### 3. 防止重复初始化DOM结构 由于 `el-dialog` 默认采用 `display:none/block` 来切换可见状态而不销毁内部 DOM 节点，因此当包含复杂逻辑或依赖于生命周期钩子的子组件时可能会遇到问题。为了避免这种情况下的潜在性能瓶颈，可以在每次关闭前手动移除实例或者利用 keep-alive 缓存机制[^3]。 ```html <!-- 添加 destroy-on-close 属性确保关闭时彻底清除 --> <el-dialog ... destroy-on-close> ... </el-dialog> ``` #### 4. 延迟表单验证及其他耗时操作 针对某些场景下首次打开 `el-dialog` 后立即读取其内嵌元素失败的情况，建议推迟这些敏感动作直到视图更新完成后再执行。例如，借助 `$nextTick()` 方法等待下一帧再进行下一步操作；也可以考虑将异步数据获取放在合适的位置以避开同步流程中的干扰因素。 ```javascript methods: { handleOpen() { this.$nextTick(() => { if (this.$refs.form) { this.$refs.form.resetFields(); } }); } } ``` 通过上述措施综合应用，应该能够在很大程度上改善基于 ElementUI 构建的应用程序中涉及 `el-dialog` 场景的整体表现效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值