Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法

<template>
   <el-table :data="admin_list" stripe style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="name" label="姓名" min-width="100"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column label="权限">
          <template slot-scope="scope">
            {{ scope.row.roleName === 'ORG_ADMIN' ? '普通' : '超级 ' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'LOCKED' ? 'warning' : 'success'" disable-transitions>
              <i :class="scope.row.status === 'LOCKED' ? ' el-icon-lock' : ' el-icon-user'"></i>
              {{ scope.row.status === 'LOCKED' ? '锁定' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="telephone" label="电话"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作" align="center" width="245" fixed="right" prop="status">
          <template slot-scope="scope">
            <el-button :type="scope.row.status === 'LOCKED' ? 'success' : 'warning'" @click="addAdmin(scope.$index)" size="small">{{ scope.row.status === 'LOCKED' ? '解锁' : '锁定' }}</el-button>
            <el-button type="primary" @click="edit(scope.$index)" size="small">编辑</el-button>
            <el-button type="danger" size="small" @click="del(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
</template>

<script>
  // 为超级管理员那一行设置背景样式
    tableRowClassName({row,rowIndex}) {
      if (row.roleName === "ORG_SUPER_ADMIN") {
        console.log(rowIndex)
        return 'warning-row'
      } 
      return ''
    },
</script>

<style lang="less" scoped>
	.el-table .warning-row {
	  background:#F8ECDA;
  	  color:red //测试
	}
</style>

.el-table .warning-row td{
  background:#F8ECDA !important;
  color:red
}

//1. 要使用深度选择器+td
//2. 因为table默认有背景色，所以在设置背景色的时要写td，并设置优先级
/deep/ .el-table .warning-row td{
  background:#F8ECDA !important;
  color:red
}

.el-table .warning-row td{
  background:#F8ECDA !important;
  color:red
}

import './assets/css/global.css'

<style>
  .el-table .warning-row td {
  background: #f8ecda !important;
  color: red;
}
</style>