解决Vue父传子,子组件Prop参数及时跟新问题

2019-07-05  本文已影响0人  royluck
子组件:
watch: {
    random (val) {
        this.pieTipArr = this.chartData.rows.map((e, idx) => {
          return {
            ...e,
            color: this.chartColors[idx],
            percent: parseInt(((e.统计数量 / this.total).toFixed(2)) * 100) + '%'
          }
        })
      }
    },
父组件:
<PieChart :chartData="pieChartData" :total="pieChartTotal" v-if="pieChartTotal"/>
data(){
  return {
        // 饼图数据
        pieChartData: {
          columns: ['统计内容', '统计数量'],
          random: '',   // 组件刷新
          rows: [
            { '统计内容': '按时完成: 210', '统计数量': 150 },
            { '统计内容': '超期任务: 24', '统计数量': 120 },
            { '统计内容': '未完成任务: 12', '统计数量': 56 },
          ]
        },
  }
}

methods:{
            ...
            // 饼图
            let data = []
            // 对象转数组
            for(let i in e.data){
              if(i == 'task_finish_count' ||i == 'task_expire_count' || i == 'task_unfinish_count'){
                let obj = {
                  desc: i == 'task_finish_count' ? '按时完成' : i == 'task_expire_count' ? '超期任务' : '未完成任务',
                  percent: e.data[i]
                }
                data.push(obj)
              }
            }
            data.forEach((e,idx)=>{
              let obj = {
                ...e,
                '统计内容': e.desc,
                '统计数量': e.percent
              }
              that.$set(that.pieChartData.rows,idx,obj)
            })
            let random = Math.random()  // 随机数<<<<<<<<<<<<<<<<<<<(关键)
            that.$set(that.pieChartData,'random',random)
            that.pieChartTotal = that.pieChartData.rows.map(e=>{
              return e.统计数量
            }).reduce((total,num)=>{
              return total+num
            })
}

或许有更好的方法,感觉这种方法,太繁琐了

上一篇 下一篇

猜你喜欢

热点阅读