0
294
VistasConditionally change text color in BootstrapVue table
I have a table created using bootstrap-vue.
Table looks like this;
The code for this table is as follows;
<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>
I would like to change the text colour of Person age column such that if age is >= 20, colour is green and red if otherwise.
I am using vue.js v2.6
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Try this:
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>
·
Juan Pablo Isaza
Denunciar
0
You can use the tdClass property on your field definition, which accepts a function where you can conditionally return a class that should be added to the td. This way you don't have to use a slot, and can avoid rendering unnecessary elements.
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>
·
Juan Pablo Isaza
Denunciar
0
I'm trying to help, but heads up, I haven't use bootstarp on vue, only vuetify. But I think it's similar. Okay let's go into it.
According to Bootstrap documentation, you can add template. Maybe look like this:
<template #cell(age)="data">
<span :class="data.item.age>20? 'green-text-class':'red-text-class'">{{ data.item.age }}</span>
</template>
sry If I'm wrong. cheers~
·
Juan Pablo Isaza
Denunciar
Responde la pregunta