在实际的开发中，前后端分离，使用elemntUI组件的el-table组件实现列表的时候，需要判断某些条件下，某行要进行颜色标识，具体效果图如下：
效果图
<template>
<el-table
:data="columnData"
style="width: 100%"
:row-class-name="tableRowClassName">
<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>
<!-- 不要把下面的warning-row放在 <style lang="scss" scoped> 中，新写一个<style> 否则样式不生效-->
<style>
.warning-row {
background-color: #E6ABAB !important;
}
</style>
<script>
export default {
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
}
return '';
}
},
data() {
return {
columnData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
}
}
</script>
