时间戳

首页 > 解决方案 > 如何改变b表Vue JS中列数据的颜色

javascript - 如何改变b表Vue JS中列数据的颜色

问题描述

我正在使用 vue js b-table，我想要实现的是基于 Health_Status/Availability_Status 我想为表格数据添加一些颜色背景。

示例“如果 Health_Status 很重要，我想将其设为红色背景，

我已经通过像这样使用 v-chip 并在其上调用方法的简单引导实现了同样的事情，但我无法用 b-table 实现同样的事情。

<td class="text-sm-left">
     <v-chip :color="getColor(item.severity)" dark>{{ item.severity }}</v-chip>
</td>

这是代码片段中不起作用的部分：

.vue

<b-table :items="items" :fields="fields" striped responsive="sm">
   <template v-slot:Health_Status="row">
            <v-chip
              :color="getColor(row.Health_Status)"
              dark
            >{{ row.item.Health_Status}}</v-chip>
        </template>
</b-table>

.JSON

 items: [
          { Name:'RO Site', Availability_Status: 'up', Health_Status: 'critical' },
          { Name:'WO Site', Availability_Status: 'down', Health_Status: 'critical' },
          { Name:'PO Site', Availability_Status: 'up',Health_Status: 'critical'},
          { Name:'GO Site', Availability_Status: 'down', Health_Status: 'critical' }
        ], 

#method (return the color code)
methods: {
    getColor(Health_Status) {
      if (Health_Status === 'critical') return "red";
      else return "green";
    },
}

#

那么你们能否建议我在这里缺少什么或使用 vue js b-table 完成相同任务的另一种方法。

标签： javascriptvue.jsvuejs2

解决方案

我的猜测是您的插件版本使用了错误的语法。由于它们最近发生了变化，因此如果您使用的是旧版本并查看当前文档，它将不适合您。

下面的代码片段使用需要 Vue2.6.x和 Bootstrap-Vue的语法2.0.x。

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        items: [
          { Name:'RO Site', Availability_Status: 'up', Health_Status: 'critical' },
          { Name:'WO Site', Availability_Status: 'down', Health_Status: 'normal' },
          { Name:'PO Site', Availability_Status: 'up',Health_Status: 'normal'},
          { Name:'GO Site', Availability_Status: 'down', Health_Status: 'critical' }
        ]
      }
    },
    methods: {
      getColor(status) {
        if(status === 'critical') return "red"
      
        return "green";
      }
    }
  })
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-table :items="items">
    <!-- 
    Using the syntax v-slot:cell(field)="{ value }" means you can type value directly instead of doing row.value
    -->
    <template v-slot:cell(health_status)="{ value }">
      <span :style="`color: ${getColor(value)}`">
        {{ value }}
      </span>
      <!-- this should work for you too
      <v-chip :color="getColor(value)">
      </v-chip>
      -->
    </template>
  </b-table>
</div>

推荐阅读