guosen-activity-web/src/components/index/accountstatic.vue

<template>
  <el-card :header="head">
    <avue-data-display :option="option"></avue-data-display>
  </el-card>
</template>

<script>
  export default {
    props: {
      head: {},
      statData: {
        todayIn: null,
        todayOut:null,
        historyIn:null,
        historyOut:null
      }
    },
    data() {
      return {
        option: {
          span: 6,
          data: [{
              click: function() {

              },
              count: this.statData.todayOut,
              decimals: 2,
              title: '今日扣款',

            },
            {
              click: function() {

              },
              count: this.statData.historyOut,
              decimals: 2,
              title: '历史扣款',

            },
            {
              click: function() {

              },
              count: this.statData.todayIn,
              decimals: 2,
              title: '今日采购',

            },
            {
              click: function() {},
              count: this.statData.historyIn,
              decimals: 2,
              title: '历史采购',

            }
          ]
        },
      }
    },
      watch:{
          statData:{
              handler(){
                  this.option.data[0].count = this.statData.todayOut;
                  this.option.data[1].count = this.statData.historyOut;
                  this.option.data[2].count = this.statData.todayIn;
                  this.option.data[3].count = this.statData.historyIn;
                  this.$forceUpdate()
              },

              immediate:true,
                  deep:true

          }
      },
    mounted() {

    }
  }
</script>

<style>
</style>