如果此列值大于另一个列值，则在 BootstrapVue table 中更改文本颜色

Question

我有一个 BootstrapVue table 看起来像这样；

如果 Age >= ID，我想将 Age 列中数字的文本颜色更改为绿色，如果 Age < [=，则更改为红色14=].

这是单个 HTML 文件中的代码。

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.css" rel="stylesheet"/>

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

<div id='app'>
    <b-table :items="items" :fields="fields" bordered>  
    </b-table>
</div>

<script>
    new Vue({
  el: '#app',
  data: dataInit,  
})

function dataInit() {  
    
    let init_data = {};
    
    init_data.fields = [
        { key: 'id', label: 'ID'},
        { key: 'age', label: 'Age'},
        { key: 'first', label: 'First Name'},
        { key: 'last', label: 'Last Name'},        
      ];
    init_data.items = [
        { id: 18, first: 'Mike', last: 'Kristensen', age: 16 },
        { id: 40, first: 'Peter', last: 'Madsen', age: 52 },
        { id: 80, first: 'Mads', last: 'Mikkelsen', age: 76 },
        { id: 28, first: 'Mikkel', last: 'Hansen', age: 34 },
      ];
    
    return init_data;
  }
</script>

我正在使用 Vue.js v2 和 BootstrapVue。

Answer 1

您可以根据条件使用 BootstrapVue prop ":tbody-tr-class" 简单地在行上应用 class，然后在其上调用方法它检查是否 age>18 然后 return bootstrap danger class 这会将行变成红色。
您可以按照给定 link 上的行样式和属性部分进行操作：https://bootstrap-vue.org/docs/components/table。您可以简单地使用下面给出的代码：

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.css" rel="stylesheet"/>

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

<div id='app'>
    <b-table :items="items" :fields="fields"  bordered>  
    <template #cell(age)="data"> <span v-if="data.item.age>18" class="text-danger">{{ data.item.age }}</span> <span v-else>{{ data.item.age }}</span> </template>
    </b-table>
</div>

<script>
    new Vue({
  el: '#app',
  data: dataInit,  
  
})

function dataInit() {  
    
    let init_data = {};
    
    init_data.fields = [
        { key: 'id', label: 'ID'},
        { key: 'age', label: 'Age'},
        { key: 'first', label: 'First Name'},
        { key: 'last', label: 'Last Name'},        
      ];
    init_data.items = [
        { id: 18, first: 'Mike', last: 'Kristensen', age: 16 },
        { id: 40, first: 'Peter', last: 'Madsen', age: 52 },
        { id: 80, first: 'Mads', last: 'Mikkelsen', age: 76 },
        { id: 28, first: 'Mikkel', last: 'Hansen', age: 34 },
      ];
    
    return init_data;
  }
</script>

Answer 2

使用_cellVariants属性即可简单实现。

工作演示：

new Vue({
    el: '#app',
    data() {
      return {
        items: [{
          id: 18,
          age: 16,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          id: 40,
          age: 52,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          id: 80,
          age: 76,
          first_name: 'Geneva',
          last_name: 'Wilson',
        },
        {
          id: 28,
          age: 34,
          first_name: 'Thor',
          last_name: 'MacDonald'
        }]
      }
    }
  })

.text-red {
  color: red;
}

.text-green {
  color: green;
}

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css"/>
<div id="app">
  <b-table hover :items="items">
    <template v-slot:cell(age)="{ item }">
      <span :class="{ 'text-green': item.age >= item.id, 'text-red': item.age < item.id }">
      {{ item.age }}
      </span>
    </template>
  </b-table>
</div>

Answer 3

您可以使用显示的相同方法。

这是在你的 field definition 中使用 tdClass 属性，它接受一个函数，你可以在其中有条件地 return a class 或 class是的。该函数获取以下参数。

value，这将是单元格的原始值。
key，将是字段中的键。
item，每一行的整个对象，您可以使用它来访问其他单元格的值。

new Vue({
  el:"#app",
  data: () => ({
    fields: [
      { key: 'last_name' },
      { key: 'first_name' },
      { 
        key: 'age', 
        label: 'Person age',
        tdClass: (value, key, item) => value >= item.id ? 'text-success' : 'text-danger'
      }
    ],
    items: [
      { id: 18, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { id: 50, age: 11, first_name: 'Larsen', last_name: 'Shaw' },
      { id: 87, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { id: 66, 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 中更改文本颜色

Change text color in BootstrapVue table if this column value is greater than another column value

javascript

vue.js

vuejs2

bootstrap-vue