设置按钮的加载效果

zmc

2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a

 src/views/analysis/graph/AllRate.vue

@@ -1,10 +1,6 @@
<template>
  <div>
    <el-container>
      <!-- <el-header style="text-align:right; font-size:15px ">
         <i class="el-icon-s-data" style="font-size: 15px;color:rgb(226,207,207);margin-right:10px;"></i>
        <span style="color:rgb(226,207,207);">百分比数据</span>
        </el-header> -->

    <el-main> 
      <el-form :inline="true"  class="demo-form-inline">
@@ -41,7 +37,7 @@
    </el-form-item>
 
       <el-form-item>
        <el-button type="primary" @click="fetchData">展示图</el-button>
        <el-button type="primary" :loading="button.showChartButton" @click="fetchData">展示图</el-button>
     </el-form-item> 
     </el-form>

@@ -62,6 +58,10 @@
export default {
  data() {
    return {
      button:{
        // 展示图的按钮
        showChartButton:false,
      },
      isNoData:false,
      chart:null,
      loading:false,
@@ -222,10 +222,12 @@
        params['end'] = this.end
      }
      this.loading = true
      this.button.showChartButton = true
      axiosInstanceInstance.get('/data/id',{params:params})
        .then(response => {
          this.chartData = response.data.data
          this.loading = false
          this.button.showChartButton = false
        if(response.data.data.length==0){
          alert('该时段无数据')
          this.isNoData = true
@@ -434,5 +436,8 @@
    color: #333;
    line-height: 60px;
  } 

:deep().el-form .el-form-item__label{
  color: #000000;
  font-weight: bold;
}
</style>