zoukankan      html  css  js  c++  java
  • 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");
            }
       }
    }
  • 相关阅读:
    P1281 书的复制 dp
    P3402 最长公共子序列(nlogn)
    P1201 [USACO1.1]贪婪的送礼者Greedy Gift Givers
    P1202 黑色星期五
    P1205 方块转换
    [递推] hihocoder 1239 Fibonacci
    [二分] hihoCoder 1269 优化延迟
    [分治] POJ 3233 Matrix Power Series
    使用HTMLParser解析html
    CSAPP2e: Proxy lab 解答
  • 原文地址:https://www.cnblogs.com/bien94/p/13200566.html
Copyright © 2011-2022 走看看