el-progress实现进度条颜色不同

最新推荐文章于 2024-04-29 10:46:04 发布

MoXinXueWEB

最新推荐文章于 2024-04-29 10:46:04 发布

阅读量1.6k

点赞数 2

分类专栏： elementUI 文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/MoXinXueWEB/article/details/125390581

版权

elementUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

el-progress实现进度条颜色不同

实现效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c22et1ka-1655793148148)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220620223508990.png)]$

实现代码如下：

<template>
  <div>
    <h1>进度条排名</h1>
    <div style="width: 400px; height: 40px; margin: 0 auto; display: flex; align-item: center; justify-content: flex-start" v-for="(item, index) in egList" :key="index">
      <div style="width: 15%; line-height: 40px; text-algin: center; padding-left:10px">{{ index+1 }}</div>
      <div style="width: 65%; text-algin: left; font-size: 8px;">
        <!-- 名称 -->
        <div style="height: 20px;">{{item.name}}</div>
        <el-progress :percentage="item.num/1000*100" :show-text="false" :stroke-width="8" :color="getColor(index)"></el-progress>
      </div>
      <div style="width: 20%; line-height: 40px; padding-right: 10px; min-width: 40px">{{Number(item.num).toFixed(2)}}</div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      egList: [
        {
          num: 889,
          name: '小龙虾'
        },
        {
          num: 785,
          name: '车厘子'
        },
        {
          num: 686,
          name: '榴莲'
        },
        {
          num: 535,
          name: '海参'
        },
        {
          num: 423,
          name: '鲍鱼'
        },
        {
          num: 400,
          name: '炒鱿鱼'
        },
        {
          num: 388,
          name: '小洋房'
        },
        {
          num: 376,
          name: '庄园'
        }
      ]
    }
  },
  mounted() {},
  methods: {
    // 针对排名前三的颜色特殊处理
    getColor(val) {
      switch(val) {
        case 0:
          return '#ad2410';
          // break;
        case 1:
          return '#e67845';
          // break;
        case 2:
          return '#3d6aff';
          // break;
        default:
          '#2f53c9';
          break;
      }
    }
  }
}
</script>
  default:
          '#2f53c9';
          break;
      }
    }
  }
}
</script>