如何正确使用 cell-class-name of el-table？

Question

我想使用 cell-class-name 根据特定单元格的行和列更改单个单元格的样式。作为一个最小的例子，我只是尝试对每个单元格应用相同的 selected-cell 样式。不幸的是，设置 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

Answer 1

从 style 标签中删除 scoped 属性应该可以解决这个问题。

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

<style>

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

</style>

<style scoped>

/* other styles here*/

</style>

Answer 2

我遇到了类似的情况，我的 class 定义没有被识别/应用到我的设计中。

正如前面提到的，在我的案例中，我用手写笔试过了，效果也很好。

<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>

如您所见，有一个没有作用域标签的块（第一个），在那个区域它就像一个魅力，但在另一个块中有scoped tag，没有。

如何正确使用 cell-class-name of el-table？

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

vue.js

vue-component

element-ui