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

实现的最终效果:

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

Vue elementui 进度条随机颜色的更多相关文章

  1. vue 圆形进度条组件解析

    项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...

  2. 安卓ProgressBar水平进度条的颜色设置

    安卓系统提供了水平进度条ProgressBar的样式,而我们在实际开发中,差点儿不可能使用默认的样式.原因就是"太丑"^_^ 所以我们在很多其它的时候须要对其颜色进行自己定义,主要 ...

  3. vue 渐变 进度条 progress

    废话 不多少说 ,直接上代码 新建文件 gradual-progress.vue <!-- * @Author: gfc * @Date: 2019-11-07 14:00:11 * @Last ...

  4. 为ProgressBar进度条设置颜色1

    可以通过xml文件来设置,方法如下: 1:先在布局文件中的ProgressBar加入下面属性: android:progressDrawable="@drawable/progress_ba ...

  5. android圆形进度条ProgressBar颜色设置

    花样android Progressbar http://www.eoeandroid.com/thread-1081-1-1.html http://www.cnblogs.com/xirihanl ...

  6. vue 的进度条组件

    先看效果: 要想实现如上图的,进度跳效果,有两种方式,首先介绍第一种: 1.自己用 div 写一个,代码如下 <template> <div class="mfc-slid ...

  7. Vue中进度条的使用

    1. 安装npm install --save nprogress 2.导入js和css import NProgress from 'nprogress'import 'nprogress/npro ...

  8. 【Vue项目】商品汇前台(二)进度条插件+Vuex模块化仓库+函数的防抖与节流+路由传参

    前言 1 nprogress进度条的使用 当请求发出进度条出现并向前走,请求成功后进度条消失.nprogress是一种进度条插件 1.1 nprogress进度条插件安装 npm i --save n ...

  9. 【CSS】环形进度条

    效果图 原理剖析 1.先完成这样一个半圆(这个很简单吧) 2.overflow: hidden; 3.在中间定位一个白色的圆形做遮挡 4.完成另一半 5.使用animate配合时间完成衔接 源码 &l ...

  10. android 开发-自定义多节点进度条显示

    看效果图: 里面的线段颜色和节点图标都是可以自定义的. main.xml <RelativeLayout xmlns:android="http://schemas.android.c ...

随机推荐

  1. 【路径规划】OSQP曲线平滑 公式及代码

    参考与前言 apollo 代码:https://github.com/ApolloAuto/apollo/tree/master/modules/planning/math/smoothing_spl ...

  2. 3.8折年终钜惠,RK3568J国产工业评估板

    3.8折年终钜惠,RK3568J国产工业评估板活动火热进行中,错过等一年! -核心板国产化率100%,提供报告-瑞芯微四核ARM Cortex-A55@1.8GHz-4K视频解码.1080P视频编码. ...

  3. 从 Helm 到 Operator:Kubernetes应用管理的进化

    Helm 的作用 在开始前需要先对 kubernetes Operator 有个简单的认识. 以为我们在编写部署一些简单 Deployment 的时候只需要自己编写一个 yaml 文件然后 kubec ...

  4. P1754

    球迷购票问题 题意描述 盛况空前的足球赛即将举行.球赛门票售票处排起了球迷购票长龙. 按售票处规定,每位购票者限购一张门票,且每张票售价为50元.在排成长龙的球迷中有N个人手持面值50元的钱币,另有N ...

  5. 用 Git 操作的数据库?这个项目火了!

    # 用 Git 操作的数据库?这个项目火了!> 超级特别又实用的数据库,快来补课!Git 是一个开源的分布式版本控制系统,可以敏捷高效地管理代码,让项目代码支持同时存在多个不同的版本和分支,是程 ...

  6. 在Django中,多数据操作,你可以编写测试来查询另一个数据库服务器中的数据,并将结果导入当前Django项目的数据库表中

    在Django中,你可以编写测试来查询另一个数据库服务器中的数据,并将结果导入当前Django项目的数据库表中.下面是一个简单的示例: 假设你有一个Django应用程序,名为myapp,并且你希望从另 ...

  7. C#:只支持GET和POST方法的浏览器,如何发送PUT/DELETE请求?RESTful WebAPI如何响应?

    理想的RESTful WebAPI采用面向资源的架构,并使用请求的HTTP方法表示针对目标资源的操作类型.但是理想和现实是有距离的,虽然HTTP协议提供了一系列原生的HTTP方法,但是在具体的网络环境 ...

  8. Excel VBA编程常用语句300句

    定制模块行为 1. Option Explicit '强制对模块内所有变量进行声明 Option Private Module '标记模块为私有,仅对同一工程中其它模块有用,在宏对话框中不显示 Opt ...

  9. Python shortuuid生成库学习小结

    shortuuid生成库学习小结 by:授客 QQ:1033553122 实践环境 win10 Python 3.5.4 shortuuid-1.0.1-py3-none-any.whl 下载地址: ...

  10. 智能家居如何把老款定频空调变成智能“变频”空调#米家#智能家居#HA

    背景 最近长沙的天气暴热,室内达到了34-35度,天气预报最高温度上了40度,这么酷热的天气,离开了空调,基本上就是一身汗,全身湿透,特别难受,然后不得不开启家里的一台将近10年的老式定频空调,输入功 ...