Element: [Bug Report] table with status el-table :row-class-name="tableRowClassName" does not work on table with stripe

[Masber]

Element UI version

2.4.1

OS/Browsers version

macos google chrome 67.0.3396.87

Vue version

2.5.17-beta.0

Reproduction Link

https://jsfiddle.net/zwmcaydn/1/

Steps to reproduce

just run the jsfiddle code

What is Expected?

rows rowIndex to have green and yellow colors

What is actually happening?

el-table stripe takes preference over table row status

[jikkai]

You may need to give it higher precedence: https://jsfiddle.net/zwmcaydn/8/

---

~I create a PR to reduce the priority of stripe class, but the CSS which you write in jsfiddle still need to be modified.~

.el-table .warning-row td {
  background: oldlace;
}

.el-table .success-row td {
  background: #f0f9eb;
}

[feichangtutu]

same issue, but

give it higher precedence
provided by @jikkai not worked for me.

I write an new style and solved:
//open an new style block

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/styles/variables.scss";
//other style
</style>

[feichangtutu]

but I do not understand why this way worked. can you explain? @jikkai thanks!!!

[jikkai]

@feichangtutu
This is your case: https://jsfiddle.net/zwmcaydn/14/

- <el-table :data="tableData2"  :row-class-name="tableRowClassName" stripe>
+ <el-table :data="tableData2" :row-class-name="tableRowClassName">
    <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>

[Hikyu]

but I do not understand why this way worked. can you explain? @jikkai thanks!!!

but I still do not understand why this way worked. can you explain?

[tianhuihui4217]

i fixed this prblem, i show my code now, drop "scoped" from

    <el-table :data="tableData" style="width: 100%" border=true :row-class-name="tableRowClassName">