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

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