如何将类应用于 Buefy 表中的特定单元格?

2024-05-12

我想知道是否有一种方法可以动态应用针对 Buefy 表中特定单元格的类。作为示例,以下是我正在处理的代码:

模板:

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

Script:

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

现在,由于以下原因,整行以蓝色突出显示has-background-info被设置为 true。

然而,我想做的是仅针对特定单元格,并通过像这样传递单元格的值来有条件地应用类。

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

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

并尝试相应地设置班级

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

然而,上面的方法不起作用。还有其他方法可以做到这一点吗?


你应该把它放进去method代替computed

methods: {
    classObject(cellValue) {
      return {
        "has-background-info": cellValue === "YES" ? true : false;
      };
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将类应用于 Buefy 表中的特定单元格? 的相关文章

随机推荐