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