el-progress进度条框开着时，要实时刷新显示进度条

在 Vue 中使用 el-progress 组件时，如果你想实现实时刷新进度条，可以通过绑定一个响应式的数据属性来实现。你可以通过定时器或其他方式来更新这个数据属性，从而达到实时刷新的效果。

以下是一个完整的示例，展示了如何使用 el-progress 组件实现实时刷新进度条：

示例代码

<template><div><el-button @click="startProgress">开始进度条</el-button><el-progress :percentage="progressPercentage" :status="progressStatus"></el-progress></div>
</template><script>
export default {data() {return {progressPercentage: 0, // 进度条的百分比progressStatus: null,  // 进度条的状态（可选：success, exception）progressInterval: null // 定时器};},methods: {startProgress() {this.progressPercentage = 0; // 重置进度条this.progressStatus = null;  // 清除状态// 开始定时器，每秒增加10%的进度this.progressInterval = setInterval(() => {this.progressPercentage += 10;if (this.progressPercentage >= 100) {this.progressPercentage = 100;this.progressStatus = 'success';this.stopProgress(); // 停止定时器}}, 1000);},stopProgress() {if (this.progressInterval) {clearInterval(this.progressInterval);this.progressInterval = null;}}},beforeDestroy() {// 在组件销毁前停止定时器this.stopProgress();}
};
</script><style scoped>
/* 自定义样式 */
</style>

解释

模板部分：
- <el-button @click="startProgress">开始进度条</el-button>：按钮用于启动进度条。
- <el-progress :percentage="progressPercentage" :status="progressStatus"></el-progress>：进度条组件，绑定 percentage 和 status 属性。
数据部分：
- progressPercentage：进度条的百分比，默认为0。
- progressStatus：进度条的状态，默认为null，可以是success或exception。
- progressInterval：定时器的引用，用于控制进度条的更新。
方法部分：
- startProgress：启动进度条的方法。
  - 重置进度条的百分比和状态。
  - 使用 setInterval 每秒增加10%的进度。
  - 当进度条达到100%时，设置状态为 success 并停止定时器。
- stopProgress：停止进度条的方法。
  - 清除定时器。
- beforeDestroy：在组件销毁前停止定时器，防止内存泄漏。