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();
        });
   })
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值