Table custom style row class name in elemenui

In daily development ,el-table It is a frequently used label , Sometimes you need to highlight something , Here's the picture ：

List of official documents ：
You can specify Table Component's row-class-name Attribute to Table Add... To a line in class, Indicates that the line is in some state .
Code ：

<template>
  <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column prop="date" label=" date " width="180">
    </el-table-column>
    <el-table-column prop="name" label=" full name " width="180">
    </el-table-column>
    <el-table-column prop="address" label=" Address ">
    </el-table-column>
  </el-table>
</template>

<style> .el-table .warning-row {
       background: oldlace; } .el-table .success-row {
       background: #f0f9eb; } </style>

<script> export default {
       methods: {
       tableRowClassName({
       row, rowIndex}) {
       if (rowIndex === 1) {
       return 'warning-row'; } else if (rowIndex === 3) {
       return 'success-row'; } return ''; } }, data() {
       return {
       tableData: [{
       date: '2016-05-02', name: ' X.h. ', address: ' Jinshajiang road, putuo district, Shanghai  1518  get ', }, {
       date: '2016-05-04', name: ' X.h. ', address: ' Jinshajiang road, putuo district, Shanghai  1518  get ' }, {
       date: '2016-05-01', name: ' X.h. ', address: ' Jinshajiang road, putuo district, Shanghai  1518  get ', }, {
       date: '2016-05-03', name: ' X.h. ', address: ' Jinshajiang road, putuo district, Shanghai  1518  get ' }] } } } </script>

According to the document , stay table Add to label :row-class-name=“tableRowClassName”, At the same time script Write what you want css style , It turns out that nothing has changed .
By looking at the review elements, you can find , The specified column has been assigned class, Here's the picture ：

Compare official documents carefully , Only in style In style scoped There are differences in properties , There is no difference in other .
Only another one ：

<style scoped> ::v-deep .el-result__title p {
    
		color: red;
	}
</style> <style> .el-table .warning-row {
    
		background: oldlace !important;
	}
</style>

stay elementUI in ,row-class-name、row-style、cell-class-name To be effective, you must use global class To take effect . Because the previous code was written in components , So remove the scoped The style in this component can be changed into a global attribute .

Of course, there is a flaw in doing so , It is easy to cause unexpected errors due to repeated style definitions , Therefore, the second solution is recommended .
Use depth selector /deep/ (css Add... Before the code /deep/ that will do )

/deep/ #myContent input{
    
  /* ... */
}

Be careful , When using scss perhaps sass when , If you find that /deep/ Report errors , have access to ::deep Alternative solutions .
What I use here is scss

<style scoped> ::v-deep .el-table .warning-row {
    
		background: oldlace !important;
	}
	::v-deep .el-result__title p {
    
		color: red;
	}
</style>

in addition , There's another pit ：
If your form is set with stripe Property is set to true, Zebra stripes display , that row-class-name The effect will not be fully reflected , Only 1.3.5… Yes row-class-name The style of
in other words ,row-class-name Properties and stripe Mutually exclusive , Can't exist at the same time