el-table如何添加loading效果

更新時(shí)間：2024年08月06日 09:55:19 作者：String佳佳

這篇文章主要介紹了el-table如何添加loading效果問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

el-table添加loading效果

在el-table標(biāo)簽里面加如下代碼，data里面自己定義pictLoading=false，加載數(shù)據(jù)之前設(shè)為true，加載完成之后設(shè)為false

<el-table
       v-loading = "pictLoading"
       element-loading-background = "rgba(0, 0, 0, 0.5)"
       element-loading-text = "數(shù)據(jù)正在加載中"
       element-loading-spinner = "el-icon-loading">
</el-table>

效果圖

element-ui全局添加loading效果

有時(shí)候會(huì)有一個(gè)需求，就是跳轉(zhuǎn)到一個(gè)頁(yè)面的時(shí)候，必須要有l(wèi)oading，然后等該頁(yè)面所有的接口都調(diào)完，才能關(guān)閉loading。怎么處理呢？

我們一般是在請(qǐng)求和響應(yīng)攔截器中添加loading效果，我這邊整理了以下兩種方法。

第一種處理方法

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

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

使用element-ui的Loading組件，這個(gè)組件有兩種調(diào)用方式：

1、通過(guò)指v-loading

2、通過(guò)服務(wù)Loading.service();

2）基于element-ui進(jìn)行l(wèi)oading二次封裝組件

loading.js

import { Loading } from "element-ui";
import _ from 'lodash';
 
let loading = null;
let needRequestCount = 0;
 
 
//開(kāi)啟loading狀態(tài)
const startLoading = (headers={}) => {
  loading = Loading.service({
    lock: true,   //是否鎖定屏幕的滾動(dòng)
    text: headers.text||"加載中……",  //loading下面的文字
    background: "rgba(0, 0, 0, 0.7)",  //loading的背景色
    target:headers.target||"body"      //loading顯示在容器
  });
};
 
//關(guān)閉loading狀態(tài)
//在關(guān)閉loading為了防止loading的閃動(dòng)，采用防抖的方法，防抖計(jì)時(shí)一般采用300-600ms
//在關(guān)閉loading之后，我們需注意全局變量導(dǎo)致的V8垃圾回收機(jī)制，把沒(méi)用的變量清空為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; //請(qǐng)求時(shí)間
  }
  request(config) {
    let instance = axios.create({
      baseURL: this.baseURL,
      timeout: this.timeout
    });
    //請(qǐng)求攔截器
    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("請(qǐng)求超時(shí)!");
        return Promise.reject(error);
      }
    );
    //響應(yīng)攔截器
    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）設(shè)置個(gè)全局的方法來(lái)調(diào)用生成loading

loading.js

Vue.prototype.openLoading = function() {
  const loading = this.$loading({           // 聲明一個(gè)loading對(duì)象
    lock: true,                             // 是否鎖屏
    text: '加載中',                         // 加載動(dòng)畫(huà)的文字
    spinner: 'el-icon-loading',             // 引入的loading圖標(biāo)
    background: 'rgba(0, 0, 0, 0.8)',       // 背景顏色
    target: '.el-table, .table-flex, .region',       // **需要遮罩的區(qū)域，這里寫(xiě)要添加loading的選擇器**
    fullscreen: false,
    customClass: 'loadingclass'             // **遮罩層新增類(lèi)名，如果需要修改loading的樣式**
  })
  setTimeout(function () {                  // 設(shè)定定時(shí)器，超時(shí)5S后自動(dòng)關(guān)閉遮罩層，避免請(qǐng)求失敗時(shí)，遮罩層一直存在的問(wèn)題
    loading.close();                        // 關(guān)閉遮罩層
  },5000)
  return loading;
}

2）在使用loading的時(shí)候調(diào)用openLoading就行了

或者跟第一種方法一樣，在攔截器里面引入和調(diào)用就是全局調(diào)用，后面調(diào)接口的時(shí)候就不需要加這一行代碼了

//組件內(nèi)
getlist() {
	//創(chuàng)建loading對(duì)象開(kāi)始遮罩
	const rLoading = this.openLoading();
	//發(fā)送請(qǐng)求
	query().then(res => {
		//請(qǐng)求結(jié)束關(guān)閉loading
		rLoading.close();
	})
}

關(guān)于設(shè)置loading的樣式：customClass: ‘loadingclass’，再app.vue中添加一下這個(gè)class去改loading的樣式就好了

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

測(cè)試對(duì)比看效果

對(duì)第一種方法的效果測(cè)試：

<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">我是個(gè)神奇的按鈕</el-button>
  </div>
</template>

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

</style>

完美?。?！

再對(duì)第二種方法的效果進(jìn)行測(cè)試

<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">我是個(gè)神奇的按鈕</el-button>
  </div>
</template>

<script>

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

</style>

效果看著還行，就是有個(gè)細(xì)節(jié)問(wèn)題就是：

多個(gè)請(qǐng)求的時(shí)候打開(kāi)的loading層會(huì)越來(lái)越厚，后面會(huì)越來(lái)越薄。

不過(guò)效果是實(shí)現(xiàn)了，如果loading背景是白色可能這個(gè)弊端就不太會(huì)暴露。