Vue+Element table实现局部loading效果(不包含表头)

项目中，有一个表格加载数据，因为接口需要连接设备成功后才会返回数据，前端获取数据时间较长，所以添加局部Loading效果，以提升用户体验度

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)"

最开始是将上面代码加到<el-table>中，提交测试后，测试提出两个优化：

一、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效果未结束时，不显示table组件的no data字样

原效果：

解决：

data: {
    return {
        dataText: ""//定义
    }
},
mounted() {
    this.init();
},
methods: {
    init(){
         ...//数据请求
         //成功时判断数据是否为空
         if(res.data == undefined){
              //为空时，结合国际化进行赋值
              if(localStorage.language === 'en'){
                      this.dataText = "No data";
               }else{
                      this.dataText = "暂无数据"; 
               }
         }
    }
}