CODEWITHSUNDEEP
vue.jsvue-componentelement-ui
Christian
Christian

Reputation: 26387

How do I use cell-class-name of el-table correctly?

I want to use cell-class-name to change the styling of individual cells based on the row and column of the specific cell. As a minimal example I however just try to apply the same selected-cell-styling to every cell. Unfortunately, there's no effect through setting cell-class-name .

<template>
  <div>
    <el-table :data="myTable" :cell-class-name="cellStyle">
      <el-table-column prop="name" label="name" width="115"/>
      <el-table-column prop="occupation" label="occupation" align="right" width="115"/>
    </el-table>
  </div>
</template>

<script>
import { Table, TableColumn } from "element-ui";

export default {
  components: {
    "el-table": Table,
    "el-table-column": TableColumn
  },
  name: "HelloWorld",
  data() {
    return {
      myTable: [
        {
          name: "jhon",
          occupation: "Lawyer"
        },
        {
          name: "Tom",
          occupation: "Judge"
        }
      ]
    };
  },
  methods: {
    cellStyle() {
      return "selected-cell"
    }
  },
  props: {
    msg: String
  }
};
</script>

<style scoped>

.selected-cell {
    background: red;
    color: red;
}
</style>

https://codesandbox.io/s/element-ui-table-header-issue-1jdvu?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 0

Views: 5150

Answers (2)

Manuel Lazo
Manuel Lazo

Reputation: 862

I was experiencing a similar scenario where my class definitions were not recognised / applied on my designs.

As previously mentioned above, on my case Ive tried it with stylus and it worked very well too.

<style lang="stylus">
total-bg-color = rgba(242,242,242,0.3)
.total-row
    background-color total-bg-color !important
    td .cell
        font-weight bold
            
</style>
<style lang="stylus" scoped>
color-white = rgba(255,255,255,1)
    
.layerTable
    margin-top 0.5rem
    background-color color-white !important
    overflow-x auto
    padding-left 0.5rem
    padding-right 0.5rem
    .el-table
        margin-top 1rem
        
</style>

As you can notice, there is a block without the scoped tag (the first one), in that area it worked like a charm, but in the other block with the scoped tag, it did not.

Upvotes: 0

Fab
Fab

Reputation: 4657

Removing the scoped attribute from the style tag should fix it.

You can separate them in the following way:

<style>

.selected-cell {
    background: red;
    color: red;
}

</style>

<style scoped>

/* other styles here*/

</style>

Upvotes: 3

Related Questions