根据不同的值表格单元格显示不同的背景色

每个表格单元格显示不同的颜色

<template><div class="table-warp"><el-tableid="tables":data="tableData"borderstyle="width: 100%;height: 100%;":header-cell-style="{color: '#333',}":cell-class-name="hanedlBg"><el-table-columnv-for="(item,i) in tableHeader":key="i":prop="item.prop":label="item.name"></el-table-column></el-table></div>
</template><script>
export default {data(){return{tableHeader: [ //表头信息{"prop": "cur", //表头空白单元格信息"name": ""},{"prop": "age", "name": "年龄" },{"prop": "address","name": "地址"},{"prop": "phone","name": "电话"}],tableData: [{cur:'kkk',age: '0.4',address: '0.3',phone: "0.7",}, {cur:'lll',age: '0.13',address: '0.9',phone: "0.6",},],}},methods:{//表格单元格背景色hanedlBg({row, column, rowIndex, columnIndex}){let colors = [];//需求有多少种颜色，就定义多少个类名，每个类中设置一个颜色for (var x = 20; x >=1; x --) {//类名数组colors.push(`bg${x}`);}for(var i = 0; i < this.tableHeader.length; i ++){for(var j = 0; j < this.tableHeader.length; j ++){if(rowIndex == i && columnIndex == j){//拿到每个单元格的值let val = Number(Object.values(row)[j]);//把每个单元格的值 和 数组的下标 做对应//（比如：单元格的值在-1到1之间，数组的下标在0到19之间，这就要需要把单元格的值先加1，然后再扩大10倍，这样，就能和数组的下标对应起来）let value = Math.floor((val + 1.0 - 0.09) * 10);//0.9572console.log(val, value, colors[value])//和哪个数组的下标对应就返回哪个类名//（比如，value的值为6，那么就返回colors数组中的第7个类名）return colors[value]}}}},}
}</script><style lang='scss' scoped>
.table-warp{position: relative;display: flex;$colorList: #2161F0 #377CF1 #4D8BF3 #6399f4 #7AA8f6 #90B6F7 #A6C5F9 #BCD3FA #D3E2FC #E8F0FD #FCEEE9 #FBDDD4 #F8CCBE #F6BBA9 #F4AA93 #F2997E #EF8868 #ED7753 #EB663D #E95528;::v-deep .el-table {@each $color in $colorList {$i: index($colorList, $color);.bg#{$i} {background-color: $color;// width: 80px;// height: 60px;}.bg1 {color: #2161F0;}}}::v-deep .el-table tr td{pointer-events: none;  //去掉划过效果text-align: center;color: #FFFFFF;font-weight: 500;}::v-deep .el-table tr td:first-child{color: #333;font-weight: 500;}
}
</style>

效果：

根据不同的值表格单元格显示不同的背景色相关推荐

在excel工作表中c1单元格_已知Excel工作表中A1单元格和B1单元格的值分别为“电子科技大学”、“信息中心”，要求在C1单元格显示“...
已知Excel工作表中A1单元格和B1单元格的值分别为"电子科技大学"."信息中心",要求在C1单元格显示" 更多相关问题所谓犯罪现象的特性,是指为 ...
根据条件单元格的值改变单元格的显示色块和文字颜色等属性。
#region 设置单元格样式(设置背景色)/// <summary>/// 设置单元格样式(设置背景色)/// </summary>/// <param name=&q ...
[css] 如何让表格单元格等宽显示
[css] 如何让表格单元格等宽显示 table-layout: fixed; width: 100%; 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
excel中设置同一行中出现重复值时单元格突出显示
问题条件格式中直接选择有重复值时单元格变色是作用于整个所选区域的,也就是说在该区域里,只要有重复值时单元格就会突出显示(具体怎样显示可以自己设置,如使单元格填充色为红色). 那如果我们想对于每一行( ...
elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱
elementui表格根据指定相同属性值合并单元格 josn数据,id相同的单元格合并,前3column和后7column合并 let arr = [ {"op":"Su ...
Excel vba 具有零值的单元格中显示0
1.编写VBA宏:具有零值的单元格中显示0,并保存到"PERSONAL"个人工作簿 2.快速访问工具栏设置自定义宏按钮 Sub 具有0值的单元格中显示0() Dim A$ ...
java表格里面显示图片_jquery表格datagrid单元格显示图片及分页使用
要想达到自定义显示表格框的目的比如显示图片,超链接,按钮的形式,只需要给列添加formatter属性即可,比如显示图片: columns: [[ { field: 'IName', title: '显 ...
elementui中el-table表格根据不同的值设置单元格背景色
elementui中 el-table根据不同的值设置单元格背景色 //1.需要在表头设置cell-class-name //单元格的 className 的回调方法,也可以使用字符串为所有单元格设置 ...
html页面表格字体,如何在移动设备html页面的表格单元格中设置相同的字体大小...
我在移动设备上进行字体呈现时遇到了问题. 我有一个简单的表格宽度设置固定为800像素,通用尺寸为今天的手机.如何在移动设备html页面的表格单元格中设置相同的字体大小我的单元格中的文字都使用相同的h ...

根据不同的值表格单元格显示不同的背景色

根据不同的值表格单元格显示不同的背景色相关推荐

最新文章

热门文章