element之v-loading以及顏色修改

element之v-loading以及顏色修改

點擊element-loading
當你已經發送了請求，但是數據還沒有請求回來的時候，呈現一個數據正在加載的狀態，可以通過v-loading指令來展示加載狀態。
只需要把v-loading的值綁定為true或false即可。

<el-table v-loading="loading" :data="tableData" >
      <el-table-column type="index" :index="indexMethod"></el-table-column>
      <el-table-column prop="name" label="姓名" width="400"></el-table-column>
</el-table>

async getList(){
      //發送了請求，等待響應結果，loading為true，處於加載狀態
      this.loading= true;
      //正在請求數據
      const res = await getList();
      //數據請求完成，loading變為false，不再加載
      this.loading = false;
      this.tableData = res.list;
    //   console.log(res);
   },

區域加載：

還可以自定義加載文案，圖標，背景色。
在綁定了v-loading指令的元素上添加element-loading-text ，其值即為加載文案；element-loading-spinner，其值為加載圖標；element-loading-background，其值為加載背景色。

<el-table
    v-loading="loading"
    element-loading-text="拼命加載中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
</el-table>
1

自定義加載：

當你需要加載狀態全屏顯示的時候，可以通過修飾符fullscreen，這樣遮罩會插入至body上，
即

v-loading.fullscreen
1
全屏加載：


還可以修改loading加載時的顏色

//修改loading加載時的顏色
    .el-loading-spinner .path{
      stroke: #c8291c;
    }
————————————————
版權聲明：本文為CSDN博主「易de」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_45021462/article/details/112555406