Invalid progress prop: custom validator check failed for prop "status".

1、問題現象

　　element-ui組件el-progress的status屬性在本地環境調試時在控制台輸出中沒有看到警告信息，而在測試環境中的控制台輸出中看到了警告信息，如下截圖所示：

       

2、問題分析

　　查看element-ui官網對el-progress的屬性介紹：

參數	說明	類型	可選值	默認值
status	進度條當前狀態	string	success/exception/warning	—

　　查看邏輯代碼，在給status屬性綁定的變量賦值時為空字符，即status=''。對比status屬性的說明，status值是不能為空字符的，它只有三種可選值。

　　在本地環境是調試模式，對某些語法校驗不是很嚴格；而在發布模式中，webpack對Vue文件進行編譯打包后做了優化處理，對語法校驗進行了嚴格的控制；所以就出現了上述現象。

 

3、問題解決

　　為了滿足在同一個el-progress組件在不同的狀態之間來回切換的功能，我們可以調用setAttribute()和removeAttribute()方法來實現，同時也避免了上述問題的發生。具體的邏輯代碼示例如下所示：

changeProgressStatus(status) {
    let progressComponent = document.getElementByTagName('el-progress') // 假設該Vue文件中只有一個el-progress組件，若有多個，最好是通過getElementById()來獲取
    if (progressComponent) {
        if (status) {
             progressComponent.setAttribute("status", status);
        } else {
            progressComponent.removeAttribute("status");
        }
   }
}