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