vueelementadmin学习日记（四）四项选项卡PanelGroup的使用

整体效果是点进来展示4个数据，当点击的时候会切换到对应的折线图

数据区：

//对应着四种数据
export default {
  components: {
    CountTo
  },
  data: function() {
    return {
      panelGroup: {
        totalUser: 0,
        newUserToday: 0,
        activeToday: 0,
        todayRequest: 0
      }
    }
  }

一个例子：
由于使用滚动数字展示过大的数字会有bug，所以这里就使用三元运算，数字大于10000就把数字滚动起始位改为数字-10000；（猜测是动画时间不够展示完全）；
事件：
当点击时，将标识字符串通过this.$emit('handleSetLineChartData', type)方法调用父级组件切换折线图中展示的内容；

 methods: {
    handleSetLineChartData(type) {
      // 调用父组件的指定方法，传入参数
      this.$emit('handleSetLineChartData', type)
    },

<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('activeToday')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="star" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            Active Today
          </div>
          <count-to :start-val="panelGroup.activeToday<10000?0:panelGroup.activeToday-10000" :end-val="panelGroup.activeToday" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>

父级组件:

methods: {
    // 调用变化线型图，给4个数据卡片调用的，卡片调用的时候就加载卡片传过来的数据
    handleSetLineChartData(type) {
      // 根据子集的调用切换对应的数据
      this.lineChartData = lineChartData[type]
    }
  }

父级数据区：

data() {
    return {
      // 这里默认展示第一个数据,后续通过子组件的调用可以进行切换
      lineChartData: lineChartData.userTotal
    }
  }，
const lineChartData = {
  // 多个可选项，选中哪个就展示哪个里面的数组为折线图效果
  userTotal: {
    expectedData: [],
    actualData: []
  },
  newUserToday: {
    expectedData: [],
    actualData: []
  },
  activeToday: {
    expectedData: [],
    actualData: []
  },
  serverTodayRequest: {
    expectedData: [],
    actualData: []
  }
}