局部添加加载中效果loading （vue+elementUI）

产品需求：有时候我们不想为整个页面添加loading效果。只想给局部区域添加loading效果。（这效果就不揍产品了）

　　　　在一个表格数据加载时，因为需要连接其它东西，所以后台接口返回数据需要较长时间，因此添加局部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.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 = "暂无数据"; 
               }
         }
    }
}

 

写在最后：平时在开发产品时，会遇到不同的产品需求，问题不到，好好研究定能解决它，希望能帮到大家，感谢阅读！！！