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