vue element-ui Loading加载事件的使用以及自定义Loading加载动画

elemen-ui官方使用

 <el-tablev-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%">

loading加载事件属性解释

element-loading-text

在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方

element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值。

作为小白，这次主要记录的问题是，自定义element-ui loading 加载动画

网络查找，思路基本就是这么个思路

直接在全局样式文件中修改: 或者在 app.vue 文件中设置也可以

//index.scss      我这里是 index.scss 文件//自定义 加载动画
.el-loading-spinner {background-image:url('../assets/loading_images/loading.gif');   // 这个是自己想设置的 gif 加载动图background-repeat: no-repeat; //设置背景 图 不重复height:100%;background-position:center;  //设置背景 定位  为居中top:0;  //覆盖 element-ui  默认的 50%    因为此处设置了height:100%,所以不设置的话，会只显示一半，因为被top顶下去了
}
.el-loading-spinner .circular {display: none;  //隐藏 之前  element-ui  默认的 loading 动画
}

以及在项目中的使用

项目中封装了一个 TableBox 组件，其中控制加载动画的就是：loading="tableLoading"

    <table-box:headInfo="tableDataTitle":data="tableData":pagination="pagination":pageSizes="pageSizes":loading="tableLoading"@evTurnPage="pageChange"@evClickButton="tableBtnClick"@evSelectionChange="handleSelectionChange">

js 里设置动画的初始值

data() {return {tableLoading: false}
}

我们一般需要的功能都是在数据还没加载出来的时候，显示加载动画，也就是：tableLoading 设置为 true，待数据加载完成之后在设置 tableLoading 为 false

    // 加载数据loadData() {this.tableLoading = true;// 这里面是调用api获取数据展示this.tableData = [];const params = {page: this.pagination.page,page_size: this.pagination.limit,field: this.queryParam.type,value: this.queryParam.key,map: "map_drug"};APIDict.getListData(params).then((res) => {try {res.data.data.forEach((item) => {this.tableData.push({id: item.id,drug_type1: item.drug_type1,drug_type2: item.drug_type2,drug_type3: item.drug_type3,drug_type4: item.drug_type4,drug_name: item.drug_name,dose_type: item.dose_type,isEdit: this.isEdit});});this.pagination.total = res.data.total;this.tableLoading = false;} catch (e) {this.$message({message: e.message,type: "error"});}}).finally(() => {});},

vue element-ui Loading加载事件的使用以及自定义Loading加载动画相关推荐

【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...

vue element-ui Loading加载事件的使用以及自定义Loading加载动画

vue element-ui Loading加载事件的使用以及自定义Loading加载动画相关推荐

最新文章

热门文章