I have a BootstrapVue table that looks like this;

I would like to change the text colour of Age to green if Age >= ID and to red if Age < ID.

Here is the code in a single HTML file.

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/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/[email protected]/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>

I am using Vue.js v2 and BootstrapVue.

CodePudding user response：

you can simply apply class on the row depending upon the condition by using BootstrapVue prop ":tbody-tr-class" and then call a method on it which check whether age>18 and then return bootstrap danger class which will turn the row into red.
You can follow Row Styling and attributes section on the given link: https://bootstrap-vue.org/docs/components/table. You can simply use the code given below:

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/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/[email protected]/dist/bootstrap-vue.min.js"></script>

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

<script>
    new Vue({
  el: '#app',
  data: dataInit,  
  methods: {
      rowClass(item, type) {
        if (!item || type !== 'row') return
        if (item.age > 18) return 'table-danger'
      }
    }
})

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>

CodePudding user response：

You can simply achieve it by using _cellVariants property.

Working Demo :

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'
      }]
    }
  },
  computed: {
    styledItems() {
      return this.items.map((item)=> {
        item._cellVariants = {
          age: (item.age >= item.id) ? 'success' : 'danger'
        }
        return item;
      })  
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.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/[email protected]/dist/css/bootstrap.min.css"/>
<div id="app">
  <b-table hover :items="styledItems"></b-table>
</div>