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