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