在 BootstrapVue 中有条件地更改文本颜色 table

Question

我有一个 table 使用 bootstrap-vue 创建的。

Table 看起来像这样；

这个table的代码如下；

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
          }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 11, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

我想更改 Person age 列的文本颜色，如果年龄 >= 20，则颜色为绿色，否则为红色。

我正在使用 vue.js v2.6

Answer 1

试试这个：

new Vue({
  el:"#app",
  data: () => ({
    fields: [
      { key: 'last_name', sortable: true },
      { key: 'first_name', sortable: false },
      { key: 'age', label: 'Person age', sortable: true }
    ],
    items: [
      { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { isActive: false, age: 11, first_name: 'Larsen', last_name: 'Shaw' },
      { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]
  })
});

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>


<div id="app">
  <b-table striped hover :items="items" :fields="fields">
    <template #cell(age)="{ item }">
      <p :class="item.age >= 20 ? 'text-success' : 'text-danger'">{{item.age}}</p>
    </template>
  </b-table>
</div>

Answer 2

我正在尝试提供帮助，但请注意，我没有在 vue 上使用 bootstarp，只有 vuetify。但我认为这很相似。好吧，让我们开始吧。

根据Bootstrap documentation，您可以添加模板。可能看起来像这样：

<template #cell(age)="data">
    <span :class="data.item.age>20? 'green-text-class':'red-text-class'">{{ data.item.age }}</span>
</template>

对不起，如果我错了。干杯~

Answer 3

您可以在您的字段定义中使用 tdClass 属性，它接受一个函数，您可以在其中有条件地 return a class 应该添加到 td。这样您就不必使用插槽，并且可以避免渲染不必要的元素。

new Vue({
  el:"#app",
  data: () => ({
    fields: [
      { key: 'last_name' },
      { key: 'first_name' },
      { 
        key: 'age', 
        label: 'Person age',
        tdClass: (value) => value > 20 ? 'text-success' : 'text-danger'
      }
    ],
    items: [
      { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { age: 11, first_name: 'Larsen', last_name: 'Shaw' },
      { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]
  })
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

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


<div id="app" class="p-3">
  <b-table striped hover :items="items" :fields="fields"></b-table>
</div>

在 BootstrapVue 中有条件地更改文本颜色 table

Conditionally change text color in BootstrapVue table

javascript

vue.js

vuejs2

bootstrap-vue