- element-ui中表格高亮显示
element ui官网
2.背景需求
根据表格中数据,某一列根据数据内容高亮显示,如:高级别告警是红色,低级别告警为黄色
<template>
<el-table :data="tableData2" style="width: 100%" :cell-style="cellStyle">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
cellStyle:({ row, column, rowIndex, columnIndex }) => {
console.log(row)
if (columnIndex === 1 && row.name === "王小虎2" ){
return {
backgroundColor: 'pink'
}
}
}
},
data() {
return {
tableData2: [{
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎2',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
}
}
</script>