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

实现的最终效果:

<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. SpringBoot集成实时通讯WebSocket和其它代替方案

    WebSocket 双向实时通讯 一.添加WebSocketConfig配置类 /** * 开启WebSocketConfig */ @Configuration public class WebSo ...

  2. yb课堂 VSCODE编译器和开发环境搭建 《二十五》

    前端编辑器 vscode:免费开源的现代化轻量级代码编辑器,支持大部分主流的开发语言的语法高亮.智能代码补全.自定义热键.代码对比DIFF.GIT等特性,支持插件扩展,软件跨平台支持Win.Mac以及 ...

  3. yb课堂之跨域配置 《二十三》

    CorsInterceptor.java package net.ybclass.online_ybclass.interceptor; import org.springframework.http ...

  4. .NET 9 预览版 5 发布

    微软在6月发布了.NET 9预览版的第五个版本.这个新版本的框架预计将在今年晚些时候正式发布,它是一个标准支持(STS)版本,将在2024年11月12日至2026年5月12日期间在多个操作系统上获得1 ...

  5. 效率工具RunFlow完全手册之进阶篇

    欢迎来到RunFlow手册的进阶篇,如果您还不了解RunFlow,建议先阅读我们的基础篇. (Solo 社区投稿) 搜索文件 按文件大小过滤,添加 len 参数,比如:len:1kb-2kb,len: ...

  6. 4 安卓h5分享功能未实现

    安卓h5点击分享没有复制链接到剪切板

  7. supervisor.conf部署及维护

    启动服务 supervisord -c /etc/supervisord.conf 启动服务 supervisorctl start 关闭服务 supervisorctl stop

  8. [oeasy]python0093_电子游戏起源_视频游戏_达特茅斯_Basic_家酿俱乐部

    编码进化 回忆上次内容 Ed Robert 的 创业之路 从 售卖 diy 组装配件 到进军 计算器市场 最后 发布 牛郎星8800 intel 8080 的出现 让 人人都有 自己的 个人电脑 Bi ...

  9. 【VMware VCF】VMware Cloud Foundation Part 01:概述。

    VMware Cloud Foundation(简称 VCF)是 VMware 打造的一套用于 Software Defined Data Center(SDDC)软件定义数据中心的全栈云平台解决方案 ...

  10. 题解:P10722 [GESP202406 六级] 二叉树

    题意 一颗 \(n\) 节点的二叉树,每个节点非黑即白,给你 \(Q\) 次操作,每次给你一个 \(u\),把 \(u\) 的子树内所有节点颜色反转,问最终每个节点的颜色. 分析 看到数据范围,首先把 ...