Hello every one i using vue for two mont and i want to know that How can i change color in bootstrapvue table. this is my table enter image description here
and this is what i need to display if data begin with (+) and change text color to green and if data begin with (-) and change text color to red. And here is my bootstrabvue code
<b-table
:items="search_transfer"
:fields="columnsheader"
:current-page="currentPage"
:per-page="perPage"
class="tbsearch"
></b-table>
For me, styling works only when defined inline within fields data. As an example, please refer below code snippet:
fields: [
{
key: 'shortfall',
sortable: true,
class: 'text-center',
tdClass: (value) => {
if (value != null && value.indexOf('-') === -1) {
return 'text-red'
}
}
},
]
And a reminder to not use scoped style; use global style:
<style>
.text-red {
color: red;
}
</style>
You can utilize the tdClass property in your fields object to determine what class/classes a specific column should have.
In the snippet i pass a method to tdClass which receives the value of the column per row, and then i determine what class to return.
The return value of the method should either be a string or an array.
As an alternative you can utilize slots and bind the class you want based on the value provided there. However i would recommend utilizing tdClass
new Vue({
el: '#app',
data() {
return {
items: [],
fields: [
{ key: 'id' },
{ key: 'amount', tdClass: 'setAmountTdClass' },
{ key: 'amount2' }
]
}
},
mounted() {
this.items.push({ id: 1, amount: '+1.00', amount2: '+1.00'})
this.items.push({ id: 2, amount: '-123.00', amount2: '-123.00' })
this.items.push({ id: 3, amount: '-12.00', amount2: '-12.00' })
this.items.push({ id: 4, amount: '-2.00', amount2: '-2.00' })
this.items.push({ id: 5, amount: '-3.00', amount2: '-3.00' })
this.items.push({ id: 6, amount: '+15.00', amount2: '+15.00' })
},
methods: {
setAmountTdClass(value) {
var firstChar = value.charAt(0)
if(firstChar === '+')
return 'text-green'
else if(firstChar === '-')
return 'text-red'
}
}
}).text-red {
color: red;
}
.text-green {
color: green;
}<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://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app">
<b-table :items="items" :fields="fields">
<!-- Alternative utilizing slots -->
<template v-slot:cell(amount2)="{ value }">
<span :class="{ 'text-red': value.charAt(0) === '-', 'text-green': value.charAt(0) === '+' }">
{{ value }}
</span>
</template>
</b-table>
</div>
text-danger text-success, text-warning, text-info, etc. getbootstrap.com/docs/4.4/utilities/colors/#color