项目要求显示进度条,而且进度条的颜色不能重复,所以就有了随机进度条的想法。
实现的最终效果:
<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' ],