如何将 class 应用于 Buefy Table 中的特定单元格？

Question

我想知道是否有一种方法可以让我动态应用 classes 针对 Buefy table 中的特定单元格。例如，以下是我正在处理的代码：

模板：

  <b-table :data="status.peerStatus">
    <template slot-scope="props">
      <b-table-column :class="classObject" v-for="(column, index) in columns" :key="index"
        :label="column.label" :visible="column.visible" :width="200">
        {{ props.row[column.field] }}
      </b-table-column>
    </template>
  </b-table>

脚本：

  computed: {
    classObject() {
      return {
        "has-background-info": true
      };
    }

现在，由于 has-background-info 设置为 true，整行都以蓝色突出显示。

但是，我想做的是仅针对特定单元格并通过像这样传递单元格的值有条件地应用 class。

现在，我正在尝试将单元格的值传递给 classObject，就像这样

<b-table-column :class="classObject(props.row[column.field])" v-for="(column, index) in columns" :key="index"

并尝试相应地设置 class

 computed: {
    classObject(cellValue) {
      return {
        "has-background-info": cellValue === "YES" ? true : false;
      };
    }

但是，上面的方法不起作用。还有其他方法吗？

Answer 1

你应该把它放在 method 而不是 computed

methods: {
    classObject(cellValue) {
      return {
        "has-background-info": cellValue === "YES" ? true : false;
      };
    }
}

如何将 class 应用于 Buefy Table 中的特定单元格？

How to apply class to a specific cell in a Buefy Table?

vue.js

buefy