vue+el-progress根据后台返回的状态显示不同进度

效果图如下

image.png

后台返回给我的状态信息如下

image.png

首先我们得自己写一个状态表，然后根据后台返回的状态信息，去匹配状态表的信息

    <el-table-column
        label="状态"
        prop="status"
        width="180"
      >
        <template slot-scope="scope">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="showPercentage(scope.row.status)"></el-progress>
          <div>{{showStatus(scope.row.status)}}</div>
        </template>

      </el-table-column>

data() {
      return {
        myProgress: {
          10: 20, 21: 42, 22: 44, 23: 46, 24: 48, 40: 80,
          25: 50, 26: 52, 27: 54, 41: 82, 42: 100, 43: 100, 50: 100
        },
      }
    },

showPercentage(state){
        return this.myProgress[state]
 },

 showStatus(status) {
        if (status === 10) {
          return '初始状态中...'
        } else if (status === 20) {
          return '升级前MD5计算中...'
        } else if (status === 21) {
          return '升级前漏洞计算中...'
        } else if (status === 22) {
          return '升级前扫描任务中...'
        } else if (status === 23) {
          return '手动升级中...'
        } else if (status === 24) {
          return '自动升级中...'
        } else if (status === 25) {
          return '升级后MD5计算中...'
        } else if (status === 26) {
          return '升级后漏洞计算中...'
        } else if (status === 27) {
          return '升级后扫描任务中...'
        } else if (status === 40) {
          return '升级完成'
        } else if (status === 41) {
          return '任务结果打包中'
        } else if (status === 42) {
          return '任务异常结束'
        } else if (status === 43) {
          return '任务停止成功'
        } else if (status === 50) {
          return '任务完成'
        }
      },