Vue Element ui el-progress 根据后端接口返回时间动态展示百分比

Vue Element UI中的`<el-progress>`组件用于显示进度条，它可以通过绑定一些属性来展示进度信息。如果你想要根据后端接口返回的时间动态展示百分比，你可以结合Vue的响应式数据绑定和异步请求（如使用axios库）来实现。

首先，你需要在你的Vue组件的数据对象中定义一个变量来存储进度百分比，比如`progress`。然后，你可以创建一个方法来发起异步请求到后端接口获取时间数据，根据这个数据来更新`progress`变量的值。在`el-progress`组件中使用`percentage`属性绑定到`progress`变量。

以下是一个简单的示例代码：

<template>
  <div>
    <el-progress :percentage="progress"></el-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0, // 初始进度值
    };
  },
  methods: {
    fetchData() {
      // 发起异步请求
      axios.get('/api/time')
        .then(response => {
          // 假设返回的数据中有一个时间字段，你根据这个时间计算进度百分比
          const timeData = response.data;
          const progress = this.calculateProgress(timeData);
          this.progress = progress; // 更新进度条的值
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    },
    calculateProgress(time) {
      // 根据时间计算进度，这里需要你根据实际情况来定义计算逻辑
      // 例如，如果时间越长，进度越大，可以按照时间比例计算
      // return time / maxTime * 100;
      return Math.min(time / 100, 100); // 假设的计算逻辑，需要替换为实际逻辑
    }
  },
  mounted() {
    this.fetchData(); // 组件挂载后立即发起数据请求
  }
};
</script>