接口调用时使用el-progress显示进度

在前端使用Element UI库中的`el-progress`组件来显示进度，通常是在异步操作如数据加载、后台请求等过程中，需要实时反馈给用户任务的状态。当通过接口发起请求时，可以在相应的回调函数中更新`el-progress`的进度。

例如，在Vue.js中，你可以这样做：

<template>
  <div>
    <el-progress :percentage="progressPercent" :stroke-width="4"></el-progress>
    <button @click="startRequest">开始请求</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progressPercent: 0,
    };
  },
  methods: {
    startRequest() {
      this.$http.get('your-api-url', { showProgress: true }).then(response => {
        // 在这里处理响应数据
        const totalSteps = response.total; // 假设总步骤是从响应中获取到的
        for (let i = 0; i <= totalSteps; i++) {
          this.progressPercent = Math.min(i / totalSteps * 100, 100); // 更新进度百分比
          // 如果有延时，可以使用setTimeout模拟异步过程
          setTimeout(() => {
            this.$nextTick(() => {
              this.$emit('update:percentage', this.progressPercent);
            });
          }, i * 100);
        }
      });
    },
  },
};
</script>

在这个例子中，我们首先初始化一个0%的进度条。然后，在点击按钮时，开启一个HTTP请求，并设置`showProgress`属性为true，让`axios`或`element-ui-pro`的`$http`自动处理进度更新。在每次循环中，我们将进度增加并触发`update:percentage`自定义事件，视图层会接收到这个事件并更新`el-progress`的百分比。