vue =＞ element 进度条 自定义文字 三层数据渲染页面报错：Invalid prop: custom validator check failed for prop “percentage

三层数据渲染页面报错

• • 报错
  • 原因分析：
  • 解决方案：

 <!-- <el-table-column prop="address" label="吃饭了吗" width="300">
          <template slot-scope="{row}">
            <el-progress v-if="!isNaN(parseInt((row.planNum/row.completeNum)*100))" :text-inside="true" :stroke-width="15" :format="setItemText(row)" :percentage="setItemProgress(row)" :status="setItemStatus(row)">
              已吃
            </el-progress>
          </template>
        </el-table-column> -->

 // 设置进度
     setItemProgress(row) {
       if (row.planNum > row.completeNum) {
       return 100
      	} else {
        return parseInt((row.planNum / row.completeNum).toFixed(1) * 100)
      }
    },
    // 自定义进度条文字
    setItemText(row) {
     return () => {
        return '进度：' + row.xxx
     	}
     },
    // 设置当前进度条状态，显示不同颜色
    setItemStatus(row) {
      if (row.planNum > row.completeNum) {
         return 'exception'
      } else if (row.planNum === row.completeNum) {
         return 'success'
       } else {
         return 'warning'
      }
    }

报错

原因分析：

这是你用三级套用的数据时，渲染可能会有undefined的时候，就是拿不到你的数据（我下面数据渲染是再次赋过值的，this.hmwStudyTop = data.course; 此时他已经相当于一个二级数据了）

解决方案：

这个时候就需要用v-if判断一下(ps:v-show不行哦！！)，你要的数据是否存在即可

v-if="!isNaN(form.in.in_percent* 100)"