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

最新推荐文章于 2024-11-29 15:04:58 发布

前端~初学者

最新推荐文章于 2024-11-29 15:04:58 发布

阅读量3.8k

点赞数

分类专栏： Element UI 文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/DZQ1223/article/details/131108376

版权

Element UI 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中使用Element-UI库添加Loading效果。首先导入Loading组件，然后在HTML标签上应用v-loading指令，接着在data中定义加载状态变量。在调用后端接口获取数据并渲染图表前后，通过改变这个变量控制Loading的显示和隐藏。

摘要由CSDN通过智能技术生成

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
	  }
	
	},
}