How to change style in specific row in Element UI Table - vue.js

Question

I'm using Element UI for my web app.
In my app, there is a table component, that is made by el-table component provided by Element UI.
And I would like to change style for the only specific row.
Firstly, please take a look at the screenshot and my code, later, I will explain what I would like to do specifically with them.
These are the screenshot of table in my app and my code.
<template>
<el-table
:data="tableData"
height="250"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-08',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-06',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-07',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}],
}
}
}
</script>
I would like to change background color blue for the row that's Data is 2016-05-03 and 2016-05-04 in the case above.

Answer 1

You should have a look at this https://element.eleme.io/#/en-US/component/table#table-with-status. based on the property row-class-name you can apply some logic to add an class to the row.
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
JS
methods: {
tableRowClassName({row, rowIndex}) {
if (row.date >= new Date()) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
Of course you've to customize this to your needs

Answer 2

Add this code on the component stylesheet
.el-table tr:nth-child(odd) {
background-color: #845353;
}

Answer 3

Additionally +
If you are using the new version of Element-UI and row-style instead of header-row-class-name, you must not use like return: 'background: red'. You have to return Object.
ex: return: {'background': 'red'}