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

Question

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

标签： vue.jsvue-componentelement-ui

Answer 1

从标签中删除scoped属性style应该可以修复它。

您可以通过以下方式将它们分开：

<style>

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

</style>

<style scoped>

/* other styles here*/

</style>