Javascript 如何在没有_rowVariant的情况下动态更改表行的颜色？

我使用引导vue表来显示从JSON检索的信息。我收到的一个信息是一个名为“Status”的int，我想根据此变量更改整行的颜色，例如，如果Status等于1，则行为绿色。]

在bootstrap vue中，它显示根据项目数组数据中每个元素内的_rowVariant对象更改颜色的行，但是如果项目数组中没有此对象，如何更改行的颜色？如果不可能，如何将此变量插入数组的每个对象

以下是有关表格内容的代码：

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

{{row.Details显示？'Hide'：'Show'}详细信息
信息1：
{{row.item.horas_info}
信息2：
{{row.item.pdf}
隐藏细节

您可以使用计算属性向项目列表添加额外字段：

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>

...

如果您想要更多自定义样式，可以在bootstrap vue表中选中

tdClass

、

thClass

或

thStyle

。

添加`:tbody tr class=“rowClass”`
Add `:tbody-tr-class="rowClass"`
in `<b-table :tbody-tr-class="rowClass"></table>` tag
then add rowClass Method in method object like below.

methods: {
  rowClass(item, type) {
   if (!item || type !== 'row') return
   if (item.user_id == this.$auth.user.id) return 'table-success'
 }
}

在``标记中
然后在方法对象中添加rowClass方法，如下所示。
方法：{
rowClass（项目、类型）{
如果（！item | | type！=='row'）返回
if（item.user_id==this.$auth.user.id）返回“table success”
}
}

已确认，此功能运行完美无瑕