Loading 加载直到数据加载完再消失(vue-elementui)

自定义指令v-loading
只需要绑定Boolean即可。(默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。)

 <el-table v-loading="loading"  />

js里面

data() {
    return {
      loading: false
    }
},
created() {
    this.refresh()
},
methods: {
	 async refresh() { // 方法名随便取
	      this.loading = true
	      await listUserLink().then(res => {
	       // 这里放需要在向后台请求数据后调用的方法
	      })
	     
	      this.loading = false
	    }
}

拓展
1、async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。

2、await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ,你只会得到一个语法错误。

你可能感兴趣的:(vue-elementui,vue,elementui)