vue.js - 如何将类应用于 Buefy 表中的特定单元格?
问题描述
我想知道是否有一种方法可以动态应用针对 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>
脚本:
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;
};
}
}
推荐阅读
- java - 如何对具有多个值的 Enum 进行解码
- c++ - 如何正确暂停和恢复 std::thread?
- android - 资源字符串颜色在 Android 中无法以编程方式工作
- ssis - SSIS 错误代码 DTS_E_CANNOTACQUIRECONNECTIONFROMCONNECTIONMANAGER 将 XLS 转换为 TXT
- javascript - react-beautiful-dnd 的滚动行为
- typescript - 如何在使用 prisma 的玩笑测试中处理枚举值?Group[] 不可分配给 Group
- gradle - 您如何从已声明的 Maven 存储库之一下载单个文件?
- jenkins - Jenkins 构建描述现在不再显示在构建历史视图中
- javascript - 从谷歌脚本过滤下拉值
- math - 沿样条线弯曲网格