Vue中请求接口使用elementUI的loading的显示功能

最新推荐文章于 2024-06-27 13:25:07 发布
最新推荐文章于 2024-06-27 13:25:07 发布
阅读量3k 收藏 6
点赞数 2
文章标签： vue 接口 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjh_hhh/article/details/115538455
版权
本文介绍了在Vue项目中利用elementUI的loading组件，实现在接口请求数据未返回时显示loading，数据返回后隐藏loading的功能。通过在表格组件中引入loading样式，并在data中设置loading初始状态，结合定时器模拟请求过程，使用watch监听数据变化来触发loading的显示和消失。
摘要由CSDN通过智能技术生成

今天实现一个简单的功能，也是工作当中遇到的，大概就是请求接口没返回数据的时候loading显示，返回数据后loading消失

  • 首先在表格标签里引入loading样式，加载时的信息和绑定好表头和表格里面的数据
     :table-cols='tableColsMax'
     :table-data='tableData'
     v-loading="loading"
     element-loading-text="拼命加载中"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.3)"
  • 然后在data中定义好一些数据，loading的初始值为真，test是测试用的假数据
 data() {
   
    return {
   
      tableColsMax: [
最低0.47元/天 解锁文章
前端菜只因
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-请求-全局loading-elementUI
ccc_cccc_ccc的博客
05-25 480
请求—全局loading—避免操作快导致的误操作 请求、响应拦截器 / src / utils / request.js import axios from 'axios' import { MessageBox, Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' import { showFullScreenLoading, tryHideFullScree
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中的加载中状态就是小编分享给大家的全部内容了，希望能给大家一个参考
记录一个vue3请求时loading简化【可用】
最新发布
m0_50337423的博客
06-27 559
通过上述步骤，我们成功创建了一个简单而强大的加载状态管理工具，它不仅能够清晰地控制组件的加载显示逻辑，还保持了代码的整洁与模块化。Vue的Composition API使得状态管理变得更加直观和灵活，有助于开发者构建复杂且高度可维护的应用程序。这种模式鼓励我们以函数式的方式思考和组织代码，提高了代码的复用性和可测试性。
Element-UI Loading 加载组件在 Vue 中使用
qq_43262022的博客
11-10 3466
Element-UI Loading 加载组件在 Vue 中使用 官方使用 Loading 该组件解决在请求数据和加载渲染过程中的等待空白。 以下以本人的 vue 项目，作为实践讲解。 引入组件，并配置在 Vue 原型上。 import { Loading } from "element-ui"; Vue.prototype.$loading = Loading.service; 在需要的组件或页面中使用如下： 在组件中 methods 对象中添加如下方法 loadingShow() {
vue+Element实现loading效果
成在坚持，贵在坚持
08-19 5952
loading效果 指令方式 // html中, 通过设置fullscreenLoading的状态来开启和关闭loading效果，可以在css中设置背景色的透明度 <el-button @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">指令方式</el-button> // data data() { fullscreenLoading: false } //script openFullS
VUE+ElementUI 实现Loading
qq_41976919的博客
06-25 2422
因为做了个文件上传的功能，在文件上传过程中需要实现遮罩，等待文件上传成功之后才允许继续操作。 为了不影响页面的菜单，只控制文件上传部分，所以需要增加一个局部的loading。 需要给哪个部分加loading，就在哪个部分的标签区域用v-loading标签，这里我在文件上传upload组件外包了一层div： <div class="container" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" el
vue 搭配 element 封装axios 每次请求接口是加载loading
weixin_44456621的博客
01-06 1045
import axios from ‘axios’; import Qs from ‘qs’; import { Message, Loading } from ‘element-ui’; // 消息提示框组件 这个你们可以不用 import router from ‘./…/router/index’ import Vue from ‘vue’ let loadinginstance, load...
vue中axios请求全局封装loading动画
weixin_53474595的博客
03-21 957
以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例，所以我们全局封装的时候采用计数的方式确定是否关闭loading.Loading.service target里面可以配置局部现实加载动画，适应于实际项目中不需要全屏显示加载动画。
vue接口总是请求超时_vue axios请求超时的正确处理方法
weixin_39559079的博客
12-20 2039
自从使用Vue2之后，就使用官方推荐的axios的插件来调用API，在使用过程中，如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。具体原因最近公司在做一个项目, 服务端数据接口用的是Php输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown。按照搜索引擎给出来的解决方案，解决不了我的问题.最...
VUE项目axios请求时，显示loading
summer_my_sunshine的博客
01-13 2565
1.在src目录下的main.js文件中，引入： import axios from 'axios'; import Mint from 'mint-ui'; Vue.use(Mint); 2.axios发起请求时，显示loading： // axios发起请求时，显示loading axios.interceptors.request.use((config) => { Mi...
Vue + Element 实现请求加载数据时显示动效（ Loading 加载 ）
窝窝头的博客
12-12 7749
一、版本说明，参考 Element 官网 "vue": "^2.5.2", "axios": "^0.18.1", "element-ui": "^2.5.4" 二、封装加载文件的函数 2.1、在 src目录下 ，新建 api 目录， 新建 servicesHelp.js 文件 2.2、 servicesHelp.js 文件内容如下： i...
element-ui全局添加loading效果
口袋的天空的博客
04-12 5270
有时候会有一个需求，就是跳转到一个页面的时候，必须要有loading，然后等该页面所有的接口都调完，才能关闭loading。中怎么处理呢？我们一般是在请求和响应拦截器中添加loading效果，我这边整理了以下两种方法。
vue项目未加载完成前显示loading样式
qq_46617584的博客
02-07 2061
vue项目未加载完成前显示loading样式
element UI表格实现加载数据loading以及无数据时样式展示
不含糖de甜美式的博客
02-19 4625
<el-table v-loading="loadingShow" element-loading-text="数据正在加载中..." 此处省略好几行> <template slot="empty"> <div style="margin-top: 15%"> <img src="../../../img/icon.png" alt="暂无数据"> <br> <span>暂无数据</span&gt
学习笔记----请求接口时导致的页面加载问题
douzong的博客
08-04 159
在设置分页时，我这里引用了封装的组件：当没有数据时显示没有更多数据，有数据时显示还有很多数据，但由于接口和组件的不同步问题，导致进入页面后，如果页面滑动过快，来不及反应，会出现一直都有更多数据的页面显示问题，这里我们用微信自带的小程序组件来解决：wx.showloading(),在进入搜索方法时调用，请求完接口后再次调用， wx.hideLoading()，附上截图：
vue的element-ui添加加载中......v-loading，添加提示和图标
weixin_39249427的博客
04-08 9665
el-form、el-table都可以 v-loading="isShowLoading" element-loading-text="努力加载中..." element-loading-spinner="el-icon-loading" //随意换，参考文档：https://element.eleme.cn/#/zh-CN/component/icon ...
vue项目中请求接口时使用element的loading组件
走走停停
06-18 1432
import axios from 'axios'; import { Message, MessageBox, Loading } from 'element-ui'; import $store from '../../store/index.js'; var instance = axios.create({ // baseURL: process.env.BASE_API, responseType: 'json', // 返回json格式a withCredentials: tru.
Vue elementui下拉框加分页搜索功能的实现方法
06-01
可以使用Element UI组件库中的`<el-select>`组件和`<el-option>`组件来实现下拉框加分页搜索功能。以下是一个简单的示例代码： ```html <template> <div> <el-select v-model="selectedItem" filterable remote :remote-method="fetchData" :loading="isLoading"> <el-option v-for="item in items" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination> </div> </template> <script> export default { data() { return { selectedItem: null, items: [], total: 0, currentPage: 1, pageSize: 10, isLoading: false } }, methods: { fetchData(query) { this.isLoading = true; setTimeout(() => { // 发送ajax请求获取数据 // ... // 将获取到的数据设置到items和total中 this.items = [{id: 1, name: 'Option 1'}, {id: 2, name: 'Option 2'}]; this.total = 2; this.isLoading = false; }, 1000); }, handleCurrentChange(currentPage) { this.currentPage = currentPage; // 重新发送数据请求 this.fetchData(); } } } </script> ``` 在上面的代码中，我们使用`<el-select>`组件来展示下拉框，设置`filterable`属性为`true`表示启用搜索功能，设置`remote`属性为`true`表示启用远程搜索功能，然后使用`:remote-method`属性来绑定搜索方法`fetchData`。在`fetchData`方法中，我们可以使用`setTimeout`模拟异步请求数据的过程，并将获取到的数据设置到`items`和`total`中。同时，我们还使用了`<el-pagination>`组件来展示分页器，并使用`@current-change`事件来监听分页器页码的变化，然后重新发送数据请求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值