基于Element-UI给Vue页面添加Loading效果

2023-10-30

1、引入

import { Loading } from 'element-ui'

2、在标签里面添加v-loading

<div v-loading="loadLoading" id="chart-load" class="chart-load"></div>

3、在data中定义

export default {
  data () {
    return {
      loadLoading: false,
    }
  },

4、调用后端接口之前设置true,返回数据画图后设置false

methods: {
  async search () {
	  // console.log(this.searchInfo)
	  this.loadLoading = true
	  const res = await loadData({ ...this.searchInfo })
	  // console.log(res)
	  if (res.code === 200) {
	
	    let cityElectricityPower = res.result.cityElectricityPowerList.map(item => {
	      return [
	        item.time,
	        item.val
	      ]
	    })
	    let storagePower = res.result.storagePowerList.map(item => {
	      return [
	        item.time,
	        item.val
	      ]
	    })
	    let loadPower = res.result.loadPowerList.map(item => {
	      return [
	        item.time,
	        item.val
	      ]
	    })
	    this.getLoadTracking(cityElectricityPower, storagePower, loadPower, this.searchInfo.beginDate, this.searchInfo.endDate)
	    this.loadLoading = false
	  }
	
	},
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

基于Element-UI给Vue页面添加Loading效果 的相关文章

  • 如何将udp发送到udp node.js服务器?

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js
  • 仅当表单已提交时才触发 jQuery 表单验证?

    不引人注目的验证基于这样的想法 don t进行表单验证 直到用户提交表单 一旦发生这种情况 如果表单上的某些内容无效 那么一旦用户更改了每个字段 就会立即验证它 我想做的是 不显眼地 触发表单元素的验证 也就是说 only如果用户已尝试提交
  • 如果对象包含在另一个数组中,则从数组中删除该对象

    我试图从数组中删除一个对象 如果该对象的属性 唯一 包含在另一个数组中 我知道我可以像这样执行嵌套 for 循环 for i 0 i lt array length i for j 0 j lt array2 length j if arr
  • 取消html5浏览器中的单图请求

    我正在动态加载 大 图像以绘制到 html5 画布中 如下所示 var t new Image t onload t src http myurl 但每隔一段时间就会想取消图片请求完全地 我想出的唯一方法是设置src to i e t sr
  • 非 DOM 对象上的 jQuery 自定义事件

    我最近阅读了一些代码 其功能如下 bob name Bob Smith rank 7 bob bind nameChanged function bob trigger nameChanged 这似乎有效 但我在 jQuery 文档或源代码
  • Jquery从下拉列表中获取所选值的id

    我有一个下拉列表 可以从数据库获取值 如下所示 get getJobs function jobs seljobs jobs var i 0 jobs forEach function n alert job id n id 32 67 4
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • 在闪亮的数据表中为每个单元格显示工具提示或弹出窗口?

    有没有什么方法可以为 r闪亮数据表中的每个单元格获取工具提示 有很多方法可以获取悬停行或列 但我找不到一种方法来获取行和列索引并为每个单元格显示不同的悬停工具提示 任何人都可以修改以下代码吗 library shiny library DT
  • Javascript - 将值从下拉框传递到 Google Maps API

    我正在使用 Google 地图 API 为一家出租车公司创建报价表 目前 用户在 2 个文本框中输入出发点和接载点 API 会计算两点之间的距离以及行程费用 我正在尝试添加两个具有设定位置的下拉框 以便用户可以选择这些位置之一或使用文本框输
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 将 javascript 整数转换为字节数组并返回

    function intFromBytes x var val 0 for var i 0 i lt x length i val x i if i lt x length 1 val val lt lt 8 return val func
  • JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

    我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • KeyboardAvoidingView - 隐藏键盘时重置高度

    我正在使用 React NativeKeyboardAvoidingView设置我的高度View当显示键盘时 但是当我关闭应用程序中的键盘时 视图的高度不会变回原来的值

随机推荐

  • stm32 串口发数据 0x00 变 0x80

    stm32 串口发数据 0x00 变 0x80 一般配置奇校验odd和偶校验even的时候 会出现这个问题 根本原因是stm32在计算长度的时候 会把校验位也计算进去 所以你之前设置的数据位8要改成数据位9才能正常运行 USART Init
  • Android Studio升级异常:Error : Program type already present: android.support.design.widget.CoordinatorLa

    解决的方案在build gradle增加 implementation com android support design 27 1 0 如图 最后Build一下就ok了 希望你跟我是一样的错误 能帮到你最好
  • [个人笔记]操作系统复习笔记

    一 绪论 OS的作用 用户与硬件之间的接口 管理计算机资源 抽象计算机资源 OS的发展 单道批处理系统 用户程序交给监控程序 由监控程序控制作业一个接一个交给IO处理 CPU等待IO 内存浪费 资源浪费 多道批处理系统 当一个作业在等待IO
  • 手动安装Kylin5.0版本的过程

    官方文档 https kylin apache org 目前kylin3 4版本是有docker版本和安装包的 5 0只有docker没有安装包 安装包 https kylin apache org download 安装kylin5 0
  • 56. 合并区间 57. 插入区间 66. 加一

    56 合并区间 以数组 intervals 表示若干个区间的集合 其中单个区间为 intervals i starti endi 请你合并所有重叠的区间 并返回 一个不重叠的区间数组 该数组需恰好覆盖输入中的所有区间 示例 1 输入 int
  • Win11怎么共享文件夹?Win11创建共享文件夹的方法

    共享文件夹能够实现在同一个局域网或者同一个工作组之内共享资源 这样不仅能够减少资源传递的时间 还可以提高工作效率 那么Win11怎么共享文件夹呢 还有详细的系统重装教程可阅读 具体操作如下 1 首先 按键盘上的 Win X 组合键 或右键点
  • FastDFS下载文件自定义命名

    上一节我们讲述了FastDFS的搭建和文件的上传 docker搭建FastDFS及遇到的问题解决 花开花落与云卷云舒的博客 CSDN博客 这一节我们讲讲如何将上传的文件下载到我们的本机并还原为原来的文件名 一 前言 在上一节中 我们知道我们
  • 最大权闭合子图的简单证明

    文章目录 一 概念 二 证明 2 1流网络的构造 2 2首先证明原图G的任何一个闭合子图都与新图 G G
  • docker报错WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) afte

    完整报错 WARNING Retrying Retry total 4 connect None read None redirect None status None after connection broken by NewConne
  • springboot swagger2

    swagger2 介绍 Swagger Codegen 通过Codegen 可以将描述文件生成html格式和cwiki形式的接口文档 同时也能生成多钟语言的服务端和客户端的代码 支持通过jar包 docker node等方式在本地化执行生成
  • 查询练习题

    1 查询Student表中的所有记录的Sname Ssex和Class列 select Sname Ssex Class from Student 2 查询教师所有的单位即不重复的Depart列 select Depart count fr
  • AD20使用技巧和笔记

    AD20自学笔记 文章目录 AD20自学笔记 细节 规则 绘制PCB全流程 细节 AD20默认的铺铜 会出现相同网络的导线 如GND 将铺铜分隔开的情况 导致铜箔没有将区域完全覆盖 解决办法 选中铺铜区域 右键 属性 将 Pour Over
  • VS2022部署/安装 QT(以5.14.2为例)

    一 下载并安装Qt Visual Studio Tools 点击扩展 并选择管理扩展 二 搜索QT并下载Qt Visual Studio Tools 注意 如果wifi下载很慢 甚至不动 可以尝试用 热点 下载好后 关闭vs2022 它会自
  • Java基础 String StringBuffer StringBuilder的异同介绍

    一 String StringBuffer StringBuilder的对比 String StringBuffer StringBuilder 字符串类型 常量 不可变 变量 可变 变量 可变 线性安全 安全 final修饰 安全 方法s
  • 什么是PHP中的函数?它们如何使用?

    嘿 你好啊 PHP中的函数就像是一个超级有技能的工人 可以帮助我们更快更好地完成任务 它们就像是一个个工具箱 里面装满了各种用途的工具 函数可以执行各种任务 比如计算两个数的和 检查字符串是否包含某个字符 读取文件等等 使用函数可以让我们的
  • golang构造N叉树

    package main import fmt strconv sync type Spaninfo struct AppNames string json appNames ContainErr bool json containErr
  • STM32端口复用和重映射

    STM32的引脚可设置为可设置为 普通IO功能 复用功能 重映射功能 不过普通IO功能 复用功能用得比较多 复用 在TSM32里面 大部分的引脚都是有GPIO复用功能 也就是说 一个 GPIO如果可以复用为内置外设的功能引脚 那么当这个 G
  • Java使用POI导出Excel、合并单元格、插入网络图片

    假设存在这样一张表A audience 观众表 id zjhm name gender address 表B seat 座位表 表明这个观众主动坐过哪些座位 id 表C check 校核表 表明这个观众被系统管理人员校核过哪些座位 id 一
  • Python练习题——BNUZ

    python练习题 BNUZER 一 填空题 二 简答题 三 程序设计题 谏言 一 填空题 若world world 则print hello world 输出 helloworld 表达式 3 in 1 2 3 4 的值为 False 表
  • 基于Element-UI给Vue页面添加Loading效果

    基于Element UI给Vue页面添加Loading效果 1 引入 2 在标签里面添加v loading 3 在data中定义 4 调用后端接口之前设置true 返回数据画图后设置false 1 引入 import Loading fro