技术标签： # Element UI v-loading elementui 加载中
前言：需要获取后端接口数据到页面上进行显示，所以在请求发起至数据渲染页面的这段时间，为页面提供一个 loading 加载是极为必要的。
1.区域加载
以 table 表格为例，使用 v-loading，为其绑定一个布尔值（true/false），代码如下：
<template>
<div id="index">
<!-- 表格 -->
<el-table :data="tableData" v-loading="loading">
<el-table-column type="selection"></el-table-column>
<el-table-column sortable prop="name" label="姓名"></el-table-column>
<el-table-column sortable prop="number" label="代号"></el-table-column>
<el-table-column sortable prop="age" label="年龄"></el-table-column>
<el-table-column sortable prop="sex" label="性别">
<template slot-scope="scope">
<el-tag :type="scope.row.sex === '1' ? 'primary' : 'success'" disable-transitions>
{
{
scope.row.sex==='1'? '男': '女'}}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "index",
data () {
return {
loading: false, // 默认为false不显示加载
tableData:[] // 数据
}
},
created() {
// 调用获取数据方法
this.getdata()
},
methods: {
// 获取数据方法
getdata() {
this.loading = true
// 模拟获取接口数据
setTimeout(() => {
this.tableData = [ // 模拟数据
{
name: 'wangfu',
number: '001',
age: '24',
sex: '1'
},
{
name: 'wangfu',
number: '001',
age: '24',
sex: '1'
}
],
this.loading = false
}, 1000)
}
}
}
2.自定义加载
添加 element-loading-text 属性为加载文字显示在加载图标的下方， element-loading-spinner 属性为设定图标的类名，element-loading-background 属性为背景色值，代码如下：
<el-table :data="tableData"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"></el-table>
`
3.整页加载
使用指令方式来实现整页加载时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符，代码如下：
```javascript
v-loading.fullscreen.lock="loading"
js计算两个时间相差天数123456789101112//两个时间相差天数兼容firefox chromefunction datedifference(sDate1, sDate2) { //sDate1和sDate2是2006-12-18格式var dateSpan, tempDate, iDays; sDate1 = Date.parse(sDate1); sDate2 = Date.parse(sDate2); _release date:2020-11-13length:160 min(s)director:—-maker:idea pocke
我们大多数的人都认为IT行业的发展几乎都在饱和的阶段，心想自己到底该选择一个好的行业去培训呢?如果自己培训的行业刚好又处于饱和的阶段的话，是否是一个大坑呢?嵌入式的学习十...
内容简介本书以Spring Boot为技术基础，从入门到精通，由浅入深地介绍Spring Data JPA的使用。有语法，有实践，有原理剖析。 本书分为12章，内容包括整体认识JPA、JPA基础查询方法、定义查询方法、注解式查询方法、@Entity实例里面常用注解详解、JpaRepository扩展详解、JPA的MVC扩展REST支持、DataSource的配置、乐观锁、SpEL表达式在Sprin...
1、检查系统是否自带了OpenJDK以及相关安装包，如果有的话则应先将其卸载。 检查命令： java -versionrpm -qa | grep java rpm -e --nodeps tzdata-java-2013g-1.el6.noarchrpm -e --nodeps java-1.6.0-openjdk-1.6.0.0-1.66.1.13.0.el6.i686rpm -e --n..._linux jdk 切换
我们学习原生 JS 时，写过一个图片框切换的案例，还记得采用的是什么方法做到导航栏和内容栏同步切换吗？用的是自定义属性的创建和获取，比较麻烦，我们还要使用for循环遍历绑定事件，但是学了 jQuery 之后，虽然只是入门，但以及可以完成一些基本的动态效果。我们来对比一下二者的实现部分：原生 JS： 原生 JS 就是在循环给每一个 li 绑定鼠标移动事件时使用setAttribute 设置一个自定义属性 index，然后绑定移动事件时使用 getAttri..._quer原生img切换
try { int port = 2000; //端口号 string hostInfo = Dns.GetHostName(); //主机名 IPAddress[] addressList = Dns.GetHostAddresses(hostInfo); //获取IP地址列表 //用正则判断IP地址列表中是否
如何在kindle for android中导入本地文件：1、下载kindle安卓破解版，具体百度。2、将自己下载的文件放入Android/data/com.amazon.kindlefc/files就可以了 然后在软件里面查看本地或者全部内容都可以找到 。..._azw3怎么导入kindleapp
四、自行仿真虚函数表格（使用非成员函数的碰撞处理函数）//GameObject.h#ifndef GAMEOBJECT_H#define GAMEOBJECT_Hclass GameObject{ //抽象基类public: virtual ~GameObject() = 0;};class SpaceShip : public GameObject{ //宇宙飞船类pub
1. 调度数据成员(1) volatile long states; 表示进程的当前状态: TASK_RUNNING:正在运行或在就绪队列run-queue中准备运行的进程，实际参与进程调度。 TASK_INTERRUPTIBLE:处于等待队列中的进程，待资源有效时唤醒，也可由其它进程通过信号(signal)或定时中断唤醒后进入就绪队列run-queue。 TASK_UNINTERRUPT..._linux 2.4 exit代码注释
随着“互联网+医保”服务的日益普及，一部手机可问天下事，极大方便了市民就医。医保电子凭证，是参保人办理医保线上业务的身份凭证，由国家医保信息平台统一生成，全面适用于医保各项业务。使用方面，申领医保电子凭证后，参保人无需依托实体卡，只要通过国家医保APP、地方相关APP或支付宝、微信等授权的第三方渠道，即可实现医保查询、参保登记、报销支付、异地就医等功能，满足市民对便捷就医的需求。为进一步提升医疗保障公共服务能力，全国许多地方全面启动医保电子凭证推广应用工作。免费激活领取医保电子凭证，实现手机扫码即可享受_支付宝电子医保卡直接扫码就可以用了吗
当看到其他人开始开始在kernel log前加上时间戳感觉自己一定要找到方法，在从网上找到一个python脚本并加以研究后终于可以，这对于后面分析问题有帮助，记录便于后续使用，现在很多平台如高通，MTK会在kernel log打上android time , 众所周知， 启动时间一直就在，因此根据这两个时间就可以打出来，借助以下脚本可以完成：import timeimport datetime..._android log查看编译时间
项目开发中经常遇到一个比较尴尬的问题：在接口对接中，因为安全问题，只有测试环境（通常为linux环境）才能调通第三方的接口。 于是只能够在本地开发时写好代码，打包后，通过ssh/sftp等协议上传到测试环境才能够访问对方的接口。造成这个尴尬现状的本质原因是，本地开发环境无法直接访问对接放的服务器，只能借助测试环境来访问。一个更好的方案是，讲测试环境做成一个ssh转发机，这样我们在本地开发时就可