element-ui 渐变色table

先上图，根据数值的大小，实现渐变（0%->100%十个色阶）

HTML部分：

<div class="table" ><el-table border :data="retentionList"  :cell-class-name="cellStyle" :loading='tableLoading'><el-table-column :key="1" label="访问时间" prop="Time" ></el-table-column><el-table-column :key="3" label="新访问客户数" prop="count" ></el-table-column><el-table-column :key="5" label="第1月留存" prop="retention1"></el-table-column><el-table-column :key="6" label="第2月留存" prop="retention2"></el-table-column><el-table-column :key="7" label="第3月留存" prop="retention3"></el-table-column><el-table-column :key="8" label="第4月留存" prop="retention4"></el-table-column><el-table-column :key="9" label="第5月留存" prop="retention5"></el-table-column></el-table></div>

JS部分：

//cellStyle:每一列不同的值，返回相应的css样式名
cellStyle({ row, column, rowIndex, columnIndex }) {//columnIndex :获取table的列数let count = 0if (columnIndex == 0||columnIndex == 1) {return;  //第一列和第二列的背景颜色不做处理} else if (columnIndex == 2){//第三例，对值做处理if(row.retention1==0){return;}else{count = (row.retention1)/10return "colorcal" + parseInt(count);}} else if (columnIndex == 3){//第四例，对值做处理if(row.retention2==0){return;}else{count = (row.retention2)/10return "colorcal" + parseInt(count);}} else if (columnIndex == 4){//第五例，对值做处理if(row.retention3==0){return;}else{count = (row.retention3)/10return "colorcal" + parseInt(count);}} else if (columnIndex == 5){//第六例，对值做处理if(row.retention4==0){return;}else{count = (row.retention4)/10return "colorcal" + parseInt(count);}} else if (columnIndex == 6){//第七例，对值做处理if(row.retention5==0){return;}else{count = (row.retention5)/10return "colorcal" + parseInt(count);}}},

CSS部分：

//table背景颜色深浅，就靠rgba的透明度决定，cellStyle中count的数值越大，颜色越深/deep/.colorcal0 {background: rgba(0,110,221, 0.1)!important;color: #000;}/deep/.colorcal1 {background: rgba(0,110,221, 0.2)!important;color: #000;}/deep/.colorcal2 {background: rgba(0,110,221,0.3) !important;color: #000;}/deep/.colorcal3 {background: rgba(0,110,221,0.4) !important;color: #000;}/deep/.colorcal4 {background: rgba(0,110,221,0.5) !important;color: #000;}/deep/.colorcal5 {background: rgba(0,110,221,0.6) !important;color: #000;}/deep/.colorcal6 {background: rgba(0,110,221,0.7) !important;color: #000;}/deep/.colorcal7 {background: rgba(0,110,221,0.8) !important;color: #000;}/deep/.colorcal8 {background: rgba(0,110,221,0.9) !important;color: #000;}/deep/.colorcal9 {background: rgba(0,110,221,1) !important;color: #000;}

element-ui 渐变色table相关推荐

Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
Element UI的Table用法
Table 表格用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格基 2016-05-02 王小虎上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
element ui中table合并相同内容单元格
一.遍历需要合并的集合,定义spanArr数组二.在table中增加事件三.调用objectSpanMethod方法,合并单元格
element UI中table操作栏更多按钮展示与折叠的实现
1.然后给大家看下动态图 2.解决思路: 一开始我的第一反应就是可以手写一个定位布局来点击弹出更多按钮弹框,后面看了下elementUI文档上有个组件可以利用,那就是Popover 弹出框废话不 ...
vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...

element-ui 渐变色table

element-ui 渐变色table相关推荐

最新文章

热门文章