javascript - 如何在没有 _rowVariant 的情况下动态更改表格行的颜色?
问题描述
我正在使用 bootstrap-vue 表来显示我从 JSON 中检索的信息。我收到的一个信息是一个名为“Status”的 int,我想根据这个变量更改整行的颜色,例如,如果 Status 等于 1,那么行是绿色的。]
在 bootstrap-vue 的文档中,它根据 item 数组数据中每个元素内的 _rowVariant 对象显示行更改颜色,但是如果我的 items 数组中没有此对象,如何更改行的颜色?如果不可能,如何将此变量插入到数组的每个对象中?
这是有关表格内容的代码:
<b-container fluid>
<b-table hover :items="requests" :fields="fields"
@row-clicked="onRowClicked"
>
<template slot="show_details" slot-scope="row">
<!-- we use @click.stop here to prevent emitting of a 'row-clicked' event -->
<b-button size="sm" @click.stop="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}} Details
</b-button>
</template>
<template slot="row-details" slot-scope="row">
<b-card>
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>Info 1:</b></b-col>
<b-col>{{ row.item.horas_info }}</b-col>
</b-row>
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>Info 2:</b></b-col>
<b-col>{{ row.item.pdf }}</b-col>
</b-row>
<b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
</b-card>
</template>
</b-table>
</b-container>
解决方案
您可以使用计算属性向项目列表添加额外的字段:
computed: {
formartedItems () {
if (!this.requests) return []
return this.requests.map(item => {
item._rowVariant = this.getVariant(item.Status)
return item
})
}
},
methods: {
getVariant (status) {
switch (status) {
case 1:
return 'success'
case 1:
return 'danger'
default:
return 'active'
}
}
}
然后在 HTML 代码中:
<b-table hover :items="formartedItems" :fields="fields" @row-clicked="onRowClicked">
...
</b-table>
如果你想要更多定制的风格,你可以检查tdClass
,thClass
或thStyle
在 bootstrap-vue 表中。
推荐阅读
- git - 分支的 Git 子模块状态
- unit-testing - Streams (Dart) 中的意外行为单元测试
- python-3.x - 将自定义类型添加到python函数中的变量
- docker - docker 从 win cmd 行在容器中运行多行 cmd;未执行的 cmd 或 powershell 停留在多行模式 >>>
- reactjs - react-draft-wysiwyg 有没有办法控制渲染块的数量?【文字夹】
- javascript - PHP单击按钮从表中删除用户数据
- powershell - 目录中文件的 PowerShell 脚本计数
- windows - 批处理 CMD - 提取文本直到最后一个特殊字符
- xml - XPath 命令仅获取特定元素数据而不获取其他元素
- flutter - 如何在颤振测试中初始化 ScreenUtil.init()?