Как правильно использовать cell-class-name el-table? - PullRequest
Новая
       16

Как правильно использовать cell-class-name el-table?

0 голосов
/ 02 марта 2020

Я хочу использовать имя класса ячейки, чтобы изменить стиль отдельных ячеек на основе строки и столбца указанной ячейки c. В качестве минимального примера я, однако, просто пытаюсь применить один и тот же стиль selected-cell к каждой ячейке. К сожалению, нет никакого эффекта через установку имени класса ячейки. 

<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

1 Ответ

0 голосов
/ 02 марта 2020

Удаление атрибута scoped из тега style должно исправить это.

Вы можете разделить их следующим образом: 

<style>

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

</style>

<style scoped>

/* other styles here*/

</style>
...