需求分析
我们在做表格的时候经常需要将不正常的数据显示出来,所以我们这个时候就需要将这个数据变换一个显眼的颜色显示出来。可以是用户快速的看到重要的数据。
首先
查看element-UI 可以知道这边可以对行和列进行操作
直接上代码:
1、现在表格中绑定一个cellStyle
方法
<el-table
:data="tableData"
style="width: 100%"
class="customer-no-border-table"
:cell-style="cellStyle"
>
2、编写cellStyle
的方法
//让table的字变成红色
cellStyle(row,column,rowIndex,columnIndex){
if (row.column.label==="结论"&&row.row.conclusion === "不正常"){
return 'color:red'
}
//如果想一行中显示另外一个预期关联的数据的话那么久在写一个
if (row.column.label==="检查结果"&&row.row.conclusion === "不正常"){
return 'color:red'
}
//说明:
//row.column.label :你表格的字段名
//row.row.conclusion:表格字段名返回的值