前端 - 如何在hover或点击行时保持row-class-name样式？

Question

如何在hover某一行或点击高亮某一行的的时候，依然保存row-class-name所设定的样式该怎么办呢？

<script setup lang="ts">
import { ref, version as vueVersion } from 'vue'
import { version as epVersion } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'

const msg = ref('Hello World!')
const fields = [
  {
    prop: "date",
    label: "日期",
    width: 180,
  },
  {
    prop: "name",
    label: "姓名",
    width: 180,
  },
  {
    prop: "address",
    label: "地址",
  },
];
const 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",
  },
];
</script>

<template>
  <h1>{{ msg }}</h1>
  <el-input v-model="msg" />

  <p>
    <el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>
    Element Plus {{ epVersion }} + Vue {{ vueVersion }}
  </p>
  <el-table :data="tableData" row-class-name="new-row">
    <el-table-column v-for="item in fields" 
                    :prop="item.prop" 
                    :label="item.label"
                    align="center"
    ></el-table-column>
</el-table>
</template>
<style>
.new-row {
  --el-table-tr-bg-color: var(--el-color-success-light-5);
}
</style>

Answer 1

看你描述的应该是行设置了背景颜色， 但是hover和选定时，背景色展示的是默认的颜色。
是因为hover时
设置了cell的背景色 你可以在你 的class-name里穿透设置cell 的背景色
或者在class-name里边修改这俩属性 直接修改tr颜色和 hover 的颜色
--el-table-tr-bg-color: --el-table-row-hover-bg-color: