有條件地更改BootstrapVue表中的文本顏色

我有一個使用創建的表bootstrap-vue。

表是這樣的；

該表的代碼如下；

<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

uj5u.com熱心網友回復：

您可以tdClass在欄位定義上使用該屬性，該屬性接受一個函式，您可以在其中有條件地回傳一個應該添加到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/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/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/[email protected]/dist/bootstrap-vue.js"></script>


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

uj5u.com熱心網友回復：

嘗試這個：

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/[email protected]/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/[email protected]/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>

uj5u.com熱心網友回復：

我正在嘗試提供幫助，但請注意，我沒有在 vue 上使用 bootstarp，只使用 vuetify。但我認為這是相似的。好的，讓我們開始吧。

根據Bootstrap 檔案，您可以添加模板。也許看起來像這樣：

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

對不起，如果我錯了。干杯~

標籤：javascript Vue.js Vuejs2 引导程序

上一篇：如何從vuex中的API獲取資料

下一篇：在方法中觸發更改后，Vue3資料未更新