0
292
ViewsCambiar condicionalmente el color del texto en la tabla BootstrapVue
Tengo una tabla creada usando bootstrap-vue .
La mesa se ve así; 
El código de esta tabla es el siguiente;
<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> Me gustaría cambiar el color del texto de la columna Person age de modo que si la edad es >= 20, el color sea verde y rojo en caso contrario.
estoy usando vue.js v2.6
3 answers
Answer question0
Prueba esto:
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>0
Puede usar la propiedad tdClass en su definición de campo, que acepta una función en la que puede devolver condicionalmente una clase que debe agregarse a td . De esta manera, no tiene que usar una ranura y puede evitar renderizar elementos innecesarios.
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>0
Estoy tratando de ayudar, pero atención, no he usado bootstarp en vue, solo vuetify. Pero creo que es parecido. Bien, entremos en ello.
De acuerdo con la documentación de Bootstrap , puede agregar una plantilla. Tal vez se vea así:
<template #cell(age)="data"> <span :class="data.item.age>20? 'green-text-class':'red-text-class'">{{ data.item.age }}</span> </template>sry si me equivoco. saludos ~