css Question posted in
Some basic documentation can be found here.

CSS class disappeared without notice, where did it go?

I have this example table taken from https://element-plus.org/en-US/component/table.html#table-with-status

I would like to give some color for some rows.

Here is a minimal working example:

<script setup lang="ts">
type TableRec = {
    code: string
    from_title: string | null
    to_title: string | null
    from_title_short: string | null
    to_title_short: string | null
}

const tableData : TableRec[] = [
  {code:"code01", from_title: "value1", from_title_short: "value1", to_title:null, to_title_short:null},
  {code:"code02", from_title: "value2", from_title_short: "value2", to_title:"not null", to_title_short:"not null"},
  {code:"code03", from_title: "value3", from_title_short: "value3", to_title:null, to_title_short:null},  
]

const rowClassName = ({
  row,
  rowIndex
}: {
  row: TableRec
  rowIndex: number
})  => {
  if (!row.to_title) {
    return "warning-row"
  } else {
    return "success"
  }
}

</script>

<template>
    <el-table :data="tableData" :row-class-name="rowClassName">
        <el-table-column prop="code" label="Code" width="200" />
        <el-table-column prop="from_title_short" label="From" />
        <el-table-column prop="to_title_short" label="To" />
    </el-table>
</template>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

When I change the CSS and save the vue file, then I can see that hot reloading happens. The request looks like this:

import {createHotContext as __vite__createHotContext} from "/@vite/client";
import.meta.hot = __vite__createHotContext("/src/components/TranslateCategoryView.vue?vue&type=style&index=0&lang.css");
/* unplugin-vue-components disabled */
import {updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle} from "/@vite/client"
const __vite__id = "/home/user/projects/test/frontend-admin3/src/components/TranslateCategoryView.vue?vue&type=style&index=0&lang.css"
const __vite__css = "n.el-table .warning-row {n  --el-table-tr-bg-color: var(--el-color-warning-light-9);n}n.el-table .success-row {n  --el-table-tr-bg-color: var(--el-color-success-light-9);n}n"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
import.meta.hot.prune(()=>__vite__removeStyle(__vite__id))

There is no error message or warning issued. I can also see that warning-row class is added to <tr>

enter image description here

But the rows do not have a warning color. In fact, the "warning-row" class is not applied because it does not exist:

enter image description here

So it was hot-loaded, but it does not exists? I don’t understand, what is happening here?

I also tried to post this example in element plus playground ( https://element-plus.run/ ). But unfortunately, it works perfectly there:

enter image description here

I guess the problem is on my side, but there are no error messages and no warnings, and I’m unable to find out the root cause.

Tags:

2

Answers


  1. 0

    First of all, ensure that the root element of your table has the "el-table" class for the root element (in your example the "ep-table" prefix is used in many places instead).

    Secondly, verify that your tr elements have the appropriate styles applied to utilize the --el-table-tr-bg-color variable effectively, the variable itself does not set the styles:

    .el-table tr {
    background-color: var(--el-table-tr-bg-color);
}

    Custom properties (–*): CSS variables

    Login or Signup to reply.
  2. 0

    IMG class is ep-xxx. so, like this:

    .ep-table .warning-row {
    --ep-table-tr-bg-color: var(--ep-color-warning-light-9);
}
.ep-table .success-row {
    --ep-table-tr-bg-color: var(--ep-color-success-light-9);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search