基于单元格值的Vue buefy表格单元格类

Question

我有一个值在 0-1000 之间的 buefy 表，我想根据单元格值有条件地突出显示表中的单元格。例如，值高于 50 我想将单元格背景设置为绿色，25-50 为黄色，How to apply class to a specific cell in a Buefy Table? 但是这个解决方案似乎不起作用。

这是我目前的 buefy 表：

    <b-table
      :data="selectedProducts.productQuantities"
      :row-class="(row, index) => row[0] === 'TOTAL'"
    >
      <b-table-column
        label="quantity"
        v-slot="props"
        :class="cellObject(props.quantity)"
        >{{ props.quantity }}
      </b-table-column>

而且我有一个方法来计算并返回单元格的类：

  methods: {
    cellObject(quantity){
        if(quantity < 25) {
          return "is-red";
        }
        else if (quantity > 50) {
          return "is-green";
        }
        else {
          return "is-yellow";
      };
    },

返回以下类之一：

<style>
.is-red {
  background: #343a40 !important;
  font-weight: bold;
}
.is-yellow {
  background: #ee3f3f !important;
  font-weight: bold;
}
.is-green {
  background: #41f841 !important;
  font-weight: bold;
}

在反复摆弄它之后，我发现如果我这样做了 :cell-class="is-red" ，它会将其应用于整个列。

     <b-table-column
        label="quantity"
        v-slot="props"
        :cell-class="'is-red'"
        >{{ props.quantity }}
      </b-table-column>

Answer 1

您不能将此应用于列，它必须直接应用于单元格本身。不幸的是，除非您将条件放在标签中，否则使用条件不容易做到这一点，但是，我怀疑这会完成您所追求的。我建议您使用 a 并根据条件更改标签的背景颜色。例如，我们这样做：

<b-table-column label="Column Label">
  <template v-slot="props">
    <b-tag type="is-primary" v-if="props.row.value > 0 && props.row.value < 25">{{ props.row.value }}</b-tag>
    <b-tag type="is-success" v-else>{{ props.row.value }}</span>
  </template>
</b-table-column>