el-table实现局部加载(只有body体加载,表头不加载)

代码:

methods(){
// this.$nextTick并不是必须的,当表格使用v-if才能显示时,必须使用 this.$nextTick
//可根据自己的需求,修改加载的标签体target: document.querySelector("可修改")
/**当多个表格使用v-show切换显示时,给每个表格定义一个独一无二的class,然后更改querySelector的内容 
document.querySelector(".自定义类名 .el-table__body-wrapper")*/
/**el-dialog中使用局部加载时,要更改querySelector中的内容为:
document.querySelector(".el-dialog__body .el-table__body-wrapper")
*/

 this.$nextTick(()=>{
        const loading = this.$loading({
          lock: true,//同v-loading的修饰符
          text: '加载中',//加载文案
          backgroundColor: 'rgba(0, 0, 0, 0.7)',//背景色
          spinner: 'el-icon-loading',//加载图标
          target: document.querySelector(".el-table__body-wrapper")//loading需要覆盖的DOM节点,默认为body
        });
        //调用后端接口的方法
        getTableList(参数).then((res) => {
          loading.close();//关闭加载
          this.tableData = res;
        }).catch(err=>{
          loading.close();
        });
   })
}

版权声明:本文为weixin_38345306原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。