Vue elementui 进度条随机颜色


项目要求显示进度条,而且进度条的颜色不能重复,所以就有了随机进度条的想法。

实现的最终效果:

<el-table-column header-align="center" align="center" label="进度" width="100">
   <template slot-scope="scope"> 
     <el-progress :text-inside="true" :stroke-width="26" :percentage="(keepTwoDecimal(scope.row.currentScore/scope.row.standardScore)*100)" :color="colorlists[Math.floor(Math.random()*10)]">el-progress>
   template>
el-table-column> 

   在data中定义随机的颜色  
colorlists: [
'hsl(42, 48%, 54%)', 'hsl(138, 24%, 48%)', 'rgb(200, 138, 131)', 'rgb(84, 221, 226)', 'rgb(178, 199, 168)', 'rgb(16, 195, 195)', 'hsl(0, 21%, 68%)', 'rgb(226, 166, 198)', 'hsl(278, 17%, 66%)', 'rgb(153, 199, 235)', 'rgb(34,184,221)', 'rgb(221,72,34)', 'rgb(204,51,204)', 'rgb(255,204,0)', 'rgb(77,179,179)', 'rgb(196,60,141)', 'blueviolet' ],