el-progress進度條提示Invalid prop: custom validator check failed for prop “status“

報錯：

el-progress進度條提示Invalid prop: custom validator check failed for prop “status“_三元運算符

報錯原因: el-progress進度條status參數值不能帶“空格”或者為' '空的單引號

解決方案: 直接賦值錯誤寫法：

<el-progress  :status=" warning">
 </el-progress>

直接賦值正確寫法：

<el-progress  :status="warning">
 </el-progress>

三元運算符錯誤寫法：

<el-progress  :status="item1.t_state == 'normal' ? '' : item1.t_state">
 </el-progress>

三元運算符正確寫法：

<el-progress  :status="item1.t_state == 'normal' ? null : item1.t_state">
 </el-progress>

完整代碼示例

<template>
  <div>
    <!-- 正確的進度條使用示例 -->
    <el-progress :percentage="50" status="success"></el-progress>
    <el-progress :percentage="70" status="warning"></el-progress>
    <el-progress :percentage="30" status="exception"></el-progress>
    
    <!-- 使用三元運算符的正確示例 -->
    <el-progress 
      :percentage="percentage" 
      :status="item1.t_state == 'normal' ? null : item1.t_state">
    </el-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      percentage: 60,
      item1: {
        t_state: 'warning'
      }
    }
  }
}
</script>