前端开发和网站建设,学网站开发要下载哪些软件,建站一条龙的服务流程是怎么样的,网站推广需要数据整改吗注释#xff1a;
vue2elementui 表格列实现一个功能#xff0c;给定两个颜色#xff1a;红色 #f96d6f 和 绿色 #63be7b#xff0c;列数据正数时表格单元格背景色为红色#xff0c;列数据负数时表格单元格背景色为绿色#xff0c;根据数据的大小颜色依次越来越淡#xff…注释
vue2elementui 表格列实现一个功能给定两个颜色红色 #f96d6f 和 绿色 #63be7b列数据正数时表格单元格背景色为红色列数据负数时表格单元格背景色为绿色根据数据的大小颜色依次越来越淡最大的正数颜色最红剩下的正数从大到小依次根据这个红色变浅最小的负数颜色最绿剩下的负数从小到大依次根据这个绿色变浅。
此方法中最后一行数据 颜色固定显示有做单独处理不参与这个方法
封装一个js方法
/*** 增强版表格颜色渐变方法* param {Array} columnData 当前列所有数据* param {String} baseColor 基础色(#f96d6f/#63be7b)* param {Number} currentValue 当前单元格值* returns {String} 背景色样式*/
function getEnhancedColor(columnData, baseColor, currentValue) {// 分离正负数并去重排序const positives [...new Set(columnData.filter(v v 0))].sort((a,b) b-a);const negatives [...new Set(columnData.filter(v v 0))].sort((a,b) a-b);// 计算动态透明度0.2-1.0区间let opacity 0.2;if (currentValue 0 positives.length) {const rank positives.indexOf(currentValue);opacity 0.2 (0.8 * (1 - rank/positives.length));} else if (currentValue 0 negatives.length) {const rank negatives.indexOf(currentValue);opacity 0.2 (0.8 * (1 - rank/negatives.length));}else {return ; // 零值不染色}// HEX转RGBAconst r parseInt(baseColor.slice(1,3), 16);const g parseInt(baseColor.slice(3,5), 16);const b parseInt(baseColor.slice(5,7), 16);return background-color: rgba(${r}, ${g}, ${b}, ${opacity.toFixed(2)});;
}/*** ElementUI表格列颜色处理器* param {Object} params 单元格参数* param {Array} allData 表格数据* param {String} prop 字段名*/
export function columnColorHandler(params, allData, prop) {const { row,rowIndex } params;const columnData allData.map(item item[prop]);const value row[prop];// 最后一行特殊处理if (rowIndex allData.length - 1) {return background-color: #990000; color: #fff; font-weight: bold;;}if (value 0) {return getEnhancedColor(columnData, #f96d6f, value);} else if (value 0) {return getEnhancedColor(columnData, #63be7b, value);}return ;}表格中使用:cell-style“cellStyle”
el-tableborder stripe v-loadingisLoadingstylewidth: 85%;margin: 20px auto;highlight-current-row:header-cell-styleheaderCellStyle():cell-stylecellStylesort-changesortChange:datatableDatarefel-table-column propindustryName label行业 aligncenter min-width100 show-overflow-tooltiptemplate slot-scopescopediv{{ scope.row.industryName || - }}/div/template/el-table-columnel-table-column propindWeight label组合权重 aligncenter sortablecustom min-width95template slot-scopescopediv{{ formatterData(scope.row.indWeight) }}/div/template/el-table-columnel-table-column propbmIndWeight label基准权重 aligncenter sortablecustom min-width95template slot-scopescopediv{{ formatterData(scope.row.bmIndWeight) }}/div/template/el-table-columnel-table-column propexWeight label超额 aligncenter sortablecustomtemplate slot-scopescopediv{{ formatterData(scope.row.exWeight) }}/div/template/el-table-column/el-tablecellStyle方法中设置单元格背景色column.property 根据实际情况来哪一列需要就添加哪一列
cellStyle({row, column, rowIndex, columnIndex}) {if(column.property indWeight || column.property bmIndWeight || column.property exWeight || column.property indReturn || column.property bmIndReturn|| column.property exReturn || column.property iait || column.property ssit || column.property init1 || column.property total){return columnColorHandler({ row, column, rowIndex, columnIndex },this.tableData,column.property);}},这个方法最终效果是根据给定的基础色
红色#f96d6f 数据从大到小颜色依次变浅
绿色 #63be7b 数据从小到大颜色依次变浅。
