Element-ui局部添加loading效果

项⽬:Vue+element-ui

在⼀个表格数据加载时，因为需要连接其它东西，所以后台接⼝返回数据需要较长时间，因此添加局部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)\"

问题：此时根据测试反馈，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 = \"暂⽆数据\"; } } }}