使用el-progress报错

使用el-progress报错 ，element ui 进度条报警告

<el-progress 
	:text-inside="true" 
	:stroke-width="20" 
	:percentage="percentageNum" 
	status="exception"  
	:format="format"
></el-progress>

data(){
	return:{
		percentageNum:100;
	}
}

element-ui 里面的el-progress进度条组件使用出现如下警告

原因：当进度条的值（percentageNum）是通过后端返回在进行计算得到的，这时dom已经渲染完成，而作为必传项
percentageNum 的值不能为空，所以才出现以下警告

解决方案:

• 既然已经知道了问题所在，我们可以先把这个组件隐藏起来，当我们从后端拿到数据之后在把这个进度条显示出来就好了

<el-progress 
	:text-inside="true" 
	:stroke-width="20" 
	:percentage="percentageNum" 
	status="exception"  
	:format="format"
	v-if="showPercentage"
></el-progress>

data(){
	return:{
		percentageNum:"";，
		showPercentage:false,
	}
},
mounted(){
	this.getData();
},
methods:{
	getData(){  //异步获取后端数据
		if(data){  //data为获取到的数据
			this.showPercentage = true  //显示进度条
			this.percentageNum = 100; //计算进度条  
		}
	}
}

这里需要注意以下几点

• 当进度条的值（percentageNum）大于100是还是出现下面这个警告，不过也有解决方案。

解决方案： 加条件判断

methods:{
	getData(){  //异步获取后端数据
		if(data){  //data为获取到的数据
			this.showPercentage = true  //显示进度条
			this.percentageNum = 100; //计算进度条  100为模拟数据
			if(this.percentageNum >= 100){
				this.percentageNum = 100; //当计算出来的值大于等于100时，把它赋值为 100 就好了
			}
		}
	}
}

• 当你不想多取用一个变量（showPercentage），只想用一个变量（percentageNum）就完成这些事情的话，话不多说，看代码
  ，如下：

<el-progress 
	:text-inside="true" 
	:stroke-width="20" 
	:percentage="percentageNum" 
	status="exception"  
	:format="format"
	v-if="!isNaN(percentageNum)"  //注意，这里为什么要加上!isNaN(),因为当计算出来的值等于 0 时，进度条是会消失的
></el-progress>

data(){
	return:{
		percentageNum:"";
	}
}
mounted(){
	this.getData();
},
methods:{
	getData(){  //异步获取后端数据
		if(data){  //data为获取到的数据
			this.percentageNum = 100; //计算进度条  
		}
	}
}

希望对大家有所帮助，转载请说明文章出处