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'
                ],