0
349
ViewsCambie el color del texto en la tabla BootstrapVue si el valor de esta columna es mayor que el valor de otra columna
Tengo una tabla BootstrapVue que se ve así;
Me gustaría cambiar el color del texto del número en la columna Age a verde si Age >= ID y a rojo si Age < ID .
Aquí está el código en un solo archivo 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>Estoy usando Vue.js v2 y BootstrapVue.
·
Juan Pablo Isaza
3 answers
Answer question0
Simplemente puede lograrlo usando la propiedad _cellVariants .
Demostración de trabajo:
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>
·
Juan Pablo Isaza
Report
0
Puede utilizar el mismo método que se muestra aquí .
Que es usar la propiedad tdClass en su definición de campo , que acepta una función donde puede devolver condicionalmente una clase o clases. La función obtiene los siguientes argumentos.
-
value, que será el valor bruto de la celda. -
key, será la clave del campo. -
item, el objeto completo de cada fila, que puede usar para acceder a los valores de otras celdas.
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>
·
Juan Pablo Isaza
Report
0
simplemente puede aplicar la clase en la fila dependiendo de la condición usando BootstrapVue prop ": tbody-tr-class" y luego llamar a un método que verifique si la edad es> 18 y luego devuelva la clase de peligro de arranque que convertirá la fila en rojo .
Puede seguir la sección Estilo de fila y atributos en el enlace dado: https://bootstrap-vue.org/docs/components/table . Simplemente puede usar el código que se proporciona a continuación:
<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>
·
Juan Pablo Isaza
Report
Answer question