el-table如何添加loading效果

更新时间：2024年08月06日 09:55:19 作者：String佳佳

这篇文章主要介绍了el-table如何添加loading效果问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

el-table添加loading效果

在el-table标签里面加如下代码，data里面自己定义pictLoading=false，加载数据之前设为true，加载完成之后设为false

<el-table
       v-loading = "pictLoading"
       element-loading-background = "rgba(0, 0, 0, 0.5)"
       element-loading-text = "数据正在加载中"
       element-loading-spinner = "el-icon-loading">
</el-table>

效果图

element-ui全局添加loading效果

有时候会有一个需求，就是跳转到一个页面的时候，必须要有loading，然后等该页面所有的接口都调完，才能关闭loading。怎么处理呢？

我们一般是在请求和响应拦截器中添加loading效果，我这边整理了以下两种方法。

第一种处理方法

1）需要用到的第三方插件

$ npm i element-ui -S
$ npm i lodash -S
$ npm i axios -S

使用element-ui的Loading组件，这个组件有两种调用方式：

1、通过指v-loading

2、通过服务Loading.service();

2）基于element-ui进行loading二次封装组件

loading.js

import { Loading } from "element-ui";
import _ from 'lodash';
 
let loading = null;
let needRequestCount = 0;
 
 
//开启loading状态
const startLoading = (headers={}) => {
  loading = Loading.service({
    lock: true,   //是否锁定屏幕的滚动
    text: headers.text||"加载中……",  //loading下面的文字
    background: "rgba(0, 0, 0, 0.7)",  //loading的背景色
    target:headers.target||"body"      //loading显示在容器
  });
};
 
//关闭loading状态
//在关闭loading为了防止loading的闪动，采用防抖的方法，防抖计时一般采用300-600ms
//在关闭loading之后，我们需注意全局变量导致的V8垃圾回收机制，把没用的变量清空为null
const endLoading = _.debounce(() => {
  loading.close();
  loading = null;
},300);
 
 
export const showScreenLoading=(headers)=>{
   if(needRequestCount == 0&&!loading){
    startLoading(headers);
   }
   needRequestCount++;
}
 
export const hideScreenLoading=()=>{
    if(needRequestCount<=0)  return 
    needRequestCount--;
    needRequestCount = Math.max(needRequestCount, 0);
    if(needRequestCount===0){
        endLoading()
    }
}
export default {};

3）将上面封装的组件引入到utils->request文件中

import axios from "axios";
import Lockr from "lockr";
import { showScreenLoading, hideScreenLoading } from "./loading";
import { Message } from "element-ui";
 
class Service {
  construct() {
    this.baseURL = process.env.VUE_APP_URL;
    this.timeout = 3000; //请求时间
  }
  request(config) {
    let instance = axios.create({
      baseURL: this.baseURL,
      timeout: this.timeout
    });
    //请求拦截器
    instance.interceptors.request.use(
      config => {
        config.headers.Authorization = Lockr.get("token");
        if (config.headers.showLoading !== false) {
          showScreenLoading(config.headers);
        }
        return config;
      },
      error => {
        if (config.headers.showLoading !== false) {
          hideScreenLoading(config.headers);
        }
        Message.error("请求超时!");
        return Promise.reject(error);
      }
    );
    //响应拦截器
    instance.interceptors.response.use(
      response => {
        if (response.status == 200) {
          setTimeout(() => {
            if (response.config.headers.showLoading !== false) {
              hideScreenLoading();
            }
          }, 500);
          return response.data;
        }
      },
      error => {
        if (response.config.headers.showLoading !== false) {
          hideScreenLoading();
        }
        return Promise.reject(error);
      }
    );
    return instance(config);
  }
}
 
export default new Service();

第二种处理方法

1）设置个全局的方法来调用生成loading

loading.js

Vue.prototype.openLoading = function() {
  const loading = this.$loading({           // 声明一个loading对象
    lock: true,                             // 是否锁屏
    text: '加载中',                         // 加载动画的文字
    spinner: 'el-icon-loading',             // 引入的loading图标
    background: 'rgba(0, 0, 0, 0.8)',       // 背景颜色
    target: '.el-table, .table-flex, .region',       // **需要遮罩的区域，这里写要添加loading的选择器**
    fullscreen: false,
    customClass: 'loadingclass'             // **遮罩层新增类名，如果需要修改loading的样式**
  })
  setTimeout(function () {                  // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
    loading.close();                        // 关闭遮罩层
  },5000)
  return loading;
}

2）在使用loading的时候调用openLoading就行了

或者跟第一种方法一样，在拦截器里面引入和调用就是全局调用，后面调接口的时候就不需要加这一行代码了

//组件内
getlist() {
	//创建loading对象开始遮罩
	const rLoading = this.openLoading();
	//发送请求
	query().then(res => {
		//请求结束关闭loading
		rLoading.close();
	})
}

关于设置loading的样式：customClass: ‘loadingclass’，再app.vue中添加一下这个class去改loading的样式就好了

<style lang="scss">
  .loadingclass {
    .el-loading-spinner {
      i {
        color: #139cb6;
      }
      .el-loading-text {
        color: #139cb6;
      }
    }
  }
</style>

测试对比看效果

对第一种方法的效果测试：

<template>
  <div class="twoPage">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date"  label="日期"  width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button @click="showLoading">我是个神奇的按钮</el-button>
  </div>
</template>

<script>
import { showScreenLoading, hideScreenLoading } from "@/assets/js/loading";
export default {
  data() {
    return {
      tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
       {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
       {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}
       ]
    };
  },
  mounted() {
    
  },
  methods: {
   showLoading(){
     this.loading1()
     this.loading2()
     this.loading3()
     this.loading4()
   },
   loading1(){
     console.log('打开1')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('关闭1')
     },1000)
   },
   loading2(){
     console.log('打开2')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('关闭2')
     },2000)
   },
   loading3(){
     console.log('打开3')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('关闭3')
     },3000)
   },
   loading4(){
     console.log('打开4')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('关闭4')
     },4000)
   }
  }
};
</script>
<style lang="less">

</style>

完美！！！

再对第二种方法的效果进行测试

<template>
  <div class="twoPage">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date"  label="日期"  width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button @click="showLoading">我是个神奇的按钮</el-button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
       {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
       {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}
       ]
    };
  },
  methods: {
   showLoading(){
     this.loading1()
     this.loading2()
     this.loading3()
     this.loading4()
   },
   loading1(){
     console.log('开始1')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('结束1')
     },1000)
   },
   loading2(){
     console.log('开始2')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('结束2')
     },2000)
   },
   loading3(){
     console.log('开始3')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('结束3')
     },3000)
   },
   loading4(){
     console.log('开始4')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('结束4')
     },4000)
   },
  }
};
</script>
<style lang="less">

</style>

效果看着还行，就是有个细节问题就是：

多个请求的时候打开的loading层会越来越厚，后面会越来越薄。

不过效果是实现了，如果loading背景是白色可能这个弊端就不太会暴露。

注意：

第一种方法看着美观，但逻辑可能稍微有点复杂，而且引入了lodash第三方插件。

第二种方案也还行，但如果请求过多，相对可能透明样式有点生硬。

自行选择啦~~~~

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue微信分享到朋友圈 vue微信发送给好友
这篇文章主要为大家详细介绍了vue微信分享到朋友圈，vue微信发送给好友功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
Vue3 style CSS 变量注入的实现
本文主要介绍了Vue3 style CSS 变量注入的实现，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
2021-07-07
Vue 实现列表动态添加和删除的两种方法小结
今天小编就为大家分享一篇Vue 实现列表动态添加和删除的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue3中依赖注入provide、inject的使用
这篇文章主要介绍了Vue3中依赖注入provide、inject的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
基于Vue3实现的图片散落效果实例
最近工作中遇到一个效果还不错,所以想着实现一下,下面这篇文章主要给大家介绍了关于如何基于Vue3实现的图片散落效果的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
vue cli使用融云实现聊天功能的实例代码
最近小编接了一个新项目，项目需求要实现一个聊天功能，今天小编通过实例代码给大家介绍vue cli使用融云实现聊天功能的方法，感兴趣的朋友跟随小编一起看看吧
2019-04-04
Vue中的change事件无效问题及解决
这篇文章主要介绍了Vue中的change事件无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vant4 封装日期段选择器的实现
本文主要介绍了vant4 封装日期段选择器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
在vue3中使用icon图标的三种方案
这篇文章主要介绍了三种使用icon的方案，分别是element-icon、svg-icon、@iconify/vue，三种方案通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-07-07
从vue-router看前端路由的两种实现
本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由，介绍了相关原理，并对比了两种方式的优缺点与注意事项。最后分析了如何实现可以直接从文件系统加载而不借助后端服务器的Vue单页应用。
2021-05-05