el-table怎么设置单个表格变颜色

项目需求：将表格数据中相同的数据背景色改为一致，效果大致如下

HTML代码：注意一定要加上，并使用table中的单元格的 style 的回调方法cell-style

<span>{{ scope.row.date.value }}</span>

</template>

<template><div class="about"><el-table:data="tableData"borderstyle="width: 100%"// 重点，使用这个回调方法:cell-style="cellStyle"><el-table-column prop="date" label="日期" width="180"><template slot-scope="scope"><span>{{ scope.row.date.value }}</span></template></el-table-column><el-table-column prop="name" label="姓名" width="180"><template slot-scope="scope"><span>{{ scope.row.name.value }}</span></template></el-table-column><el-table-column prop="address" label="地址"><template slot-scope="scope"><span>{{ scope.row.address.value }}</span></template></el-table-column></el-table></div>
</template>

再与后端协商数据格式如下:

<script>
export default {data() {return {tableData: [{date: { value: "2016-05-02", state: 2 },name: { value: "王虎", state: 0 },address: { value: "上海市普陀区金沙江路 1517 弄", state: 2 },},{name: { value: "王小虎", state: 2 },date: { value: "2016-05-03", state: 1 },address: { value: "上海区金沙江路 15市普陀16弄", state: 2 },},{name: { value: "王虎", state: 0 },date: { value: "2016-05-03", state: 1 },address: { value: "上海区金沙江路 15市普陀18弄", state: 2 },},],}},
//方法如下methods:{cellStyle({ row, column, rowIndex, columnIndex }) {let dataColor = false;let nameColor = false;Object.keys(row).forEach((key) => {if (row[key].state == 1 && key == column.property) {if (rowIndex === rowIndex && columnIndex === columnIndex) {dataColor = true;}} else if (row[key].state == 0 && key == column.property) {if (rowIndex === rowIndex && columnIndex === columnIndex) {nameColor = true;}}});if (dataColor) {return "backgroundColor:yellow";}if (nameColor) {return "backgroundColor:pink";}},}
}
</script>

设定表格单元格颜色，围绕style 的回调方法cell-style来进行就可以啦！！！

el-table怎么设置单个表格变颜色相关推荐

css设置html表格边框颜色,互联网常识：CSS如何设置htmltable表格边框样式
设置表格边框样式的方法:1.给table元素添加"border:边框宽度边框样式边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...
easyExcel设置单个单元格(颜色）样式
背景:需求是使用excel设置目标单元格的样式(颜色),但我之前没有学过easyExcel,在网上找资料的时候,发现有关easyExcel相关的单个单元格样式设置的资料比较少,有的还源码不全,只能说用 ...
uniapp设置整个页面背景颜色渐变，设置单个页面背景颜色
<template> <view class="bg">...</view> </template><style> .b ...
customplot设置单个点的颜色_CAD教程，CAD大神总结CAD快捷键及一些参数设置大集合，码走...
嗨,我是爱踢汪.之前发过很多次快捷键整理的文章,近来有不少同学又问我有没有相关的好一些的资料,今天就再发一张快捷键表格,表格统计了一部分常用的命令快捷键.表格来源于部落窝QQ群里同学分享,希望对大家有 ...
customplot设置单个点的颜色_[原创]单个超大型TB级imaris的ims文件的Surface手绘及Mask提速新方法...
本程序用于解决处理数百GB~TB级别单个超大型ims文件/或者一大群海量Tif切片contour surfce手绘时的若干问题.可在垃圾笔记本上运行(无需独显,无CPU特殊要求,只需内存4-8G即可, ...
【uniapp】如何设置单个页面背景颜色
//单独写一个style,不会报错,亲测正常运行.<style>page {background-color: #ECECEC;} </style>// 自己的样式表 < ...
EasyExcel设置特定单个单元格(颜色）样式
原文链接出自:easyExcel设置单个单元格(颜色)样式背景:需求是使用excel设置目标单元格的样式(颜色),但我之前没有学过easyExcel,在网上找资料的时候,发现有关easyExcel相 ...
apache poi word表格样式（表格固定间隔，表格字体颜色）、段落样式（段落字体颜色，格式）
Apache POI [1] 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程序对Microsoft Office格式档案读和写的功能.POI为&qu ...
设置element ui table表格线条颜色以及设置圆角/解决element ui table设置圆角后线条不显示或显示模糊问题，亲测有效
问题描述 table表格设置为圆角后并且设置table border颜色,设置圆角后导致修改颜色后的border无法显示问题解决 /* 设置圆角以及边框颜色 */.el-table{border-r ...

el-table怎么设置单个表格变颜色

el-table怎么设置单个表格变颜色相关推荐

最新文章

热门文章