el-progress根据状态加载不同渐变色的进度条及百分比数值

要根据状态加载不同渐变色的进度条及百分比数值，可以利用 `:stroke-color` 属性和 `:percentage` 属性动态绑定不同的值。具体实现方式如下：

<el-progress :percentage="percentage" :stroke-width="20" :stroke-linecap="round" :stroke-color="strokeColor"></el-progress>
<span>{{ percentage }}%</span>

在上述代码中，我们通过 `:percentage` 属性绑定一个数值 `percentage`，它表示当前进度条的百分比数值。然后，我们利用 `:stroke-color` 属性绑定一个对象 `strokeColor`，它表示当前进度条的渐变色值。具体的渐变色值可以根据不同的状态设置不同的值，例如：

data() {
  return {
    percentage: 50,
    status: 'normal',
  };
},
computed: {
  strokeColor() {
    switch (this.status) {
      case 'success':
        return { '0%': '#7ec699', '100%': '#5cb85c' };
      case 'warning':
        return { '0%': '#f0ad4e', '100%': '#eea236' };
      case 'error':
        return { '0%': '#dd514c', '100%': '#c12e2a' };
      default:
        return { '0%': '#108ee9', '100%': '#87d068' };
    }
  },
},

在上述代码中，我们利用 `computed` 计算属性中的 `strokeColor` 方法，根据当前状态 `status` 返回不同的渐变色值。例如，当状态为 `success` 时，返回起点颜色为 `#7ec699`，终点颜色为 `#5cb85c` 的渐变色值。然后，在模板中，我们根据 `percentage` 和 `strokeColor` 动态绑定进度条和数值，当状态改变时，进度条和数值也会根据新的状态重新渲染。