vue3 - 在`<style scoped>`下`row-class-name`怎么生效?

Question

在<style scoped>下row-class-name怎么生效?

去掉scoped是可以生效的。

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

（注：可以直接将下面代码粘贴到element-plus.run中执行）

<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 scoped>
.new-row {
  --el-table-tr-bg-color: var(--el-color-success-light-5);
}
</style>

Answer 1

可以改用 CSS Modules