A column of highlight in element ui table shows how to not remove color when hover.

  javascript, vue.js

I use element ui, according to the example in the official document, using: row-class-name to add a color class to a row, but the color disappears when hover enters this column. I don’t want it to have this hover state. I want the color to be there all the time. What should I do? Look at the official documents also didn’t find a good solution,

<template>
 <el-table
 :data="tableData2"
 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= "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;
 bracket
 
 .el-table .success-row {
 background: #f0f9eb;
 bracket
 </style>
 
 <script>
 export default {
 methods: {
 tableRowClassName({row, rowIndex}) {
 if (rowIndex === 1) {
 return 'warning-row';
 } else if (rowIndex === 3) {
 return 'success-row';
 bracket
 return '';
 bracket
 },
 data() {
 return {
 tableData2: [{
 date: '2016-05-02',
 Name:' Tiger Wong',
 Address:' Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
 }, {
 date: '2016-05-04',
 Name:' Tiger Wong',
 Address:' Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
 }, {
 date: '2016-05-01',
 Name:' Tiger Wong',
 Address:' Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
 }, {
 date: '2016-05-03',
 Name:' Tiger Wong',
 Address:' Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
 }]
 bracket
 bracket
 bracket
 </script>

Before moving it up
clipboard.png
After moving it up

clipboard.png

图片描述
CssWeight problem, as long as you give the style priority is higher than this, violence point directly to a.! Important.