el-progress进度条代码示范

在 Element UI 中，el-progress 是一个非常直观易用的组件，用于显示一个线性的进度条。下面是一个简单的代码示例：

<template>
  <div>
    <el-progress :percentage="progressPercentage" :stroke-width="5"></el-progress>
    <button @click="increaseProgress">增加进度</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progressPercentage: 0,
    };
  },
  methods: {
    increaseProgress() {
      // 每次点击按钮，将进度增加 1%
      this.progressPercentage += 1;
      // 如果进度超过 100%，重置为 0
      if (this.progressPercentage > 100) {
        this.progressPercentage = 0;
      }
    },
  },
};
</script>

在这个例子中，`:percentage` 属性设置了当前进度，`:stroke-width` 设置了进度条线条的宽度。`increaseProgress` 方法模拟了一个持续的任务，每次点击按钮就更新 `progressPercentage`，当进度达到 100% 后会重置为 0，保持循环。

在实际应用中，你可以根据需要替换 `increaseProgress` 方法的内容，比如从服务器获取实时的数据并更新进度。