elementui在表格/下来列表等展示数据的区显示加载中


1,先在data属性里定义1个loading属性,默认为false

data()(

 return:{

  loading:false

  }
}

2、在el-tabale 后面增加属性:

v-loading="loading"    // 默认不显示加载 element-loading-text="正在加载中..."   // 加载提示文字  element-loading-spinner="el-icon-loading"   //  el-icon-loading是element里面的加载图标,也可以使用iconfont element-loading-background="rgba(0, 0, 0, 0.8)"    // 遮罩背景层颜色   3,在获取数据的函数里在发起请求之前让loading显示,请求失败和请求成功都不让显示          this.loading = true      // 开启发起请求       const { data: res } = await this.$axios.get('/orders', {         params: this.queryParams,       })       if (res.meta.status !== 200) {         this.$message.error(`获取订单列表数据出错:${res.meta.msg}`)         this.loading = false         return       }       console.log(res)       this.loading = false       this.orderList = res.data.goods