el-table如何添加loading效果

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

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

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效果

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

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

第一種處理方法

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

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

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

1、通過指v-loading

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

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

loading.js

import { Loading } from "element-ui";
import _ from 'lodash';
 
let loading = null;
let needRequestCount = 0;
 
 
//開啟loading狀態(tài)
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顯示在容器
  });
};
 
//關(guān)閉loading狀態(tài)
//在關(guān)閉loading為了防止loading的閃動，采用防抖的方法，防抖計時一般采用300-600ms
//在關(guān)閉loading之后，我們需注意全局變量導(dǎo)致的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);
      }
    );
    //響應(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è)置個全局的方法來調(diào)用生成loading

loading.js

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

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

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

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

關(guān)于設(shè)置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: '上海市普陀區(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('打開1')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('關(guān)閉1')
     },1000)
   },
   loading2(){
     console.log('打開2')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('關(guān)閉2')
     },2000)
   },
   loading3(){
     console.log('打開3')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('關(guān)閉3')
     },3000)
   },
   loading4(){
     console.log('打開4')
     showScreenLoading()
     setTimeout(()=>{
       hideScreenLoading()
       console.log('關(guān)閉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: '上海市普陀區(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('開始1')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('結(jié)束1')
     },1000)
   },
   loading2(){
     console.log('開始2')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('結(jié)束2')
     },2000)
   },
   loading3(){
     console.log('開始3')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('結(jié)束3')
     },3000)
   },
   loading4(){
     console.log('開始4')
     const rLoading = this.openLoading();
     setTimeout(()=>{
       rLoading.close();
       console.log('結(jié)束4')
     },4000)
   },
  }
};
</script>
<style lang="less">

</style>

效果看著還行，就是有個細節(jié)問題就是：

多個請求的時候打開的loading層會越來越厚，后面會越來越薄。

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