Element-ui局部添加loading效果

項目:Vue+element-ui

在一個表格數據加載時，因為需要連接其它東西，所以后台接口返回數據需要較長時間，因此添加局部Loading效果，增加用戶體驗度，

最開始使用下面代碼，直接放到<el-table>中，測試時遇到問題

element-loading-spinner="el-icon-loading" :element-loading-text="$t('tip.loading')" element-loading-custom-class="equipment-loading" element-loading-background="rgba(55,55,55,0.2)"

 

問題：此時根據測試反饋，Loading時不要將表頭一起loading

 

 解決：

const loading = this.$loading({
   lock: true,//同v-loading的修飾符
   text: this.$t('tip.loading'),//加載文案
   backgroundColor: 'rgba(55,55,55,0.4)',//背景色
   spinner: 'el-icon-loading',//加載圖標
   target: document.querySelector(".el-table__body")//loading需要覆蓋的DOM節點，默認為body
})

效果：

 

 注：此時loading后面的數據是已經加載完成的結果，方便截圖，暫時注釋了關閉

效果關閉:

loading.close();//加載完成時調用，關閉loading效果

 達成測試所要效果后，測試再次建議，初始加載數據時，不要顯示暫無數據字樣(vue+element)

 

 解決：

　　

 

 data中定義dataText為空，加載數據成功，再根據是否有無數據，及對應的國際化進行賦值

data: {
    return {
        dataText: ""//定義
    }
},
mounted() {
    this.init();
},
methods: {
    init(){
         ...//數據請求
         //成功時判斷數據是否為空
         if(res.data == undefined){
              //為空時，結合國際化進行賦值
              if(localStorage.language === 'en'){
                      this.dataText = "No data";
               }else{
                      this.dataText = "暫無數據"; 
               }
         }
    }
}