vue遍历设置不同颜色

最新推荐文章于 2024-10-09 10:13:02 发布

33455432

最新推荐文章于 2024-10-09 10:13:02 发布

阅读量110

点赞数 1

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_38999134/article/details/142138670

版权

<div v-for="(item,index) in productiondata.shiftList" class="mt-10">
   <el-row :gutter="20" class="mt-10">
       <el-col :span="1"><div class="numstyle"  :style="{ backgroundColor: item.color }">{{ index+1 }}</div></el-col>
       <el-col :span="5" class="ml-10">{{ item.shiftName }}</el-col>
       <el-col :span="12">
           <el-progress :text-inside="true" :stroke-width="15" 
           :percentage="item.shiftRate" :color="item.color" ></el-progress>
           <!-- :percentage="item.shiftRate" :color="customColor" ></el-progress> -->
       </el-col>
       <el-col :span="4">{{item.shiftValue}}kg</el-col>
   </el-row>
</div>

let colorarr=['rgba(103, 114, 229, 1)','rgba(103, 114, 229, 0.6)','rgba(103, 114, 229, 0.3)']
     response.data.shiftList.forEach((item,index)  => {
          this.$set(item, 'color', colorarr[index])
      })