element之v

2023-08-31 07:14| 来源: 网络整理| 查看: 265

点击element-loading 当你已经发送了请求，但是数据还没有请求回来的时候，呈现一个数据正在加载的状态，可以通过v-loading指令来展示加载状态。只需要把v-loading的值绑定为true或false即可。

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，其值为加载背景色。

自定义加载：在这里插入图片描述当你需要加载状态全屏显示的时候，可以通过修饰符fullscreen，这样遮罩会插入至body上，即

v-loading.fullscreen

全屏加载：在这里插入图片描述

还可以修改loading加载时的颜色

//修改loading加载时的颜色 .el-loading-spinner .path{ stroke: #c8291c; }

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章