0
248
VistasAgregue el signo de porcentaje a la columna de números en la tabla bootstrap-vue
Supongamos que tengo esta 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, // Variant applies to the whole column, including the header and footer variant: 'danger' } ], items: [ { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { isActive: false, age: 21, 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 agregar un signo de porcentaje como sufijo a los números en la columna Age , pero la columna se puede ordenar de acuerdo con el valor del número. ¿Cómo se puede modificar el código para hacer esto?
El ejemplo de código se extrae del siguiente enlace; https://bootstrap-vue.org/docs/components/table
estoy usando vue.js v2.6
2 Respuestas
Responde la pregunta0
Si puede modificar directamente sus datos, simplemente puede usar Array.prototype.map :
export default { data() { return { items: [ { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { age: 21, first_name: 'Larsen', last_name: 'Shaw' }, { age: 89, first_name: 'Geneva', last_name: 'Wilson' }, { age: 38, first_name: 'Jami', last_name: 'Carney' } ].map(item => ( item.age = item.age + "%", item )), } } }0
La implementación sencilla es usar la función de devolución de llamada formateada proporcionada en BootstrapVue para agregar el signo de porcentaje. A continuación, establezca la propiedad de campo sortByFormatted en falso para que la clasificación se realice de acuerdo con los valores numéricos originales sin formato.
Enlaces de documentación relevantes; https://bootstrap-vue.org/docs/components/table#formatter-callback https://bootstrap-vue.org/docs/components/table#field-definition-reference
Aquí está el cambio de código necesario;
<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, // Variant applies to the whole column, including the header and footer variant: 'danger', //Code modification needed. Add the 2 properties below; "sortByFormatted": false, formatter: value => { return (value + '%') }, } ], items: [ { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { isActive: false, age: 21, 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>