大量数据批量处理时，显示加载百分比

大量数据批量处理时，显示加载百分比

上一篇-解决表格有大量数据又需要显示在一页进行批量操作时的卡顿问题

---

---

前言

在大量数据批量操作时，用户可能等待很长时间，在等待的过程中，如果可以显示加载的进度，那么就可以提升用户的体验感。

一、选择加载显示的方式

我的项目用的是vue加element ui，要求是点击操作时，用户不能进行其它操作，有其它用户在处理中时，我们需要排队等待。

于是我在ui组件中找到下面这种有进度条组件，但是因为这个组件我试了很多次，背景无法笼罩全局，覆盖不了左边的导航栏，无论是width: 100%或者100vw还是加上z-index: 999999999;都没有用

于是我就想转用loading组件，
批量操作时全局loading，加载进度写在loading加载图标下方的加载文案中

二、在loading组件中显示百分比

1.全局显示loading的方法

element中有两个方式，指令方式和服务方式
一般我们常用指令方式也就是v-loading=“loading”，默认状况下，Loading 遮罩会插入到绑定元素的子节点，想覆盖全局需要使用v-loading.fullscreen.lock="loading"然后我打算使用显示在加载图标下方的加载文案:text去双向绑定我请求后端返回的百分比，结果发现双向绑定失效，无法实现更新百分比

然后我尝试使用服务方式，去不断更改百分比，尝试有效，关于服务方式，官网也没有详细说明如何可以直接更改文字，我是百度查到的方法 setText()
下面是服务方式的介绍，如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 loading，它的调用方式为：this.$loading(options)，会返回一个 Loading 实例，可以用实例上的方法 setText() 去更改文字，通过 close() 方法去关闭loading。

//创建loading实例
this.myloading = this.$loading({
   
          lock: true,
          text: '正在加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
//更改文字，显示百分比
this.myloading.setText('正在加载'+numText+"%");
//关闭loading实例
this.myloading.close();

2.创建获取百分比的函数

因为当有人在处理中时，其他人需等待。所以在后端的返回中，我们应该可以获取到当前正在处理的用户token和进度。如果当前没有用户在处理中就返回空。

代码如下（示例）：

import {
    setShow,getSchedule } from "@/api"
data(){
   
	return {
   
		myloading:undefined,//保存loading实例
		token:undefined,//保存用户唯一token，可以自己创建随机数，也可以拿用户登录的token
		timeStart:undefined,//作为获取百分比请求的定时器
	}
}
created () {
   
	for(var i=0;i<16;i++){
   
	      this.token+=Math.floor(Math.random()*16).toString(16);//获取0-15并通过toString转16进制
	    }
}
methods: {
   
	//处理数据的函数，data为要处理的数据，type是处理的类型，1是单数据处理，2是批量处理
	setShow (data, type