0
565
Vistas¿Cómo tener un superíndice en el encabezado de la columna de esta tabla BootstrapVue?
Tengo una tabla bootstrapvue que se parece a esto;
Aquí está el código;
<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> Quiero cambiar el encabezado de la tercera columna Person age para que tenga un superíndice de modo que se convierta en la Person age 1
Desafortunadamente, esto no es tan fácil como usar HTML dentro de la etiqueta para el encabezado de la tercera columna.
Estoy usando vue v2.6 y BootstrapVue.
3 Respuestas
Responde la pregunta0
La solución más fácil y obvia para su caso específico: utilice el carácter Unicode U+00B9, SUPERSCRIPT ONE: ¹. En muchos casos, esto parece comparable al equivalente HTML 1 y, a menudo, parecerá más preciso cuando se copie a través del portapapeles. Unicode ofrece todos los dígitos y varios símbolos matemáticos útiles , al menos tantos como necesite para las notas al pie y al final.
Aparte de eso, Bootstrap Vue le permite anular celdas particulares con HTML a través de espacios con alcance específicos de la tabla , que son una aplicación del concepto general de espacios con alcance de Vue (también disponible en Vue 3 ). Como en la documentación de Vue, estoy usando la abreviatura #head(age) en lugar del atributo completo equivalente v-slot como en v-slot:head(age) .
<b-table :items="items" :fields="fields"> <template #head(age)> Person age<sup>1</sup> </template> </b-table> Para evitar la duplicación de "Edad de la persona" tanto en la definición de campo como en el espacio personalizado, o para hacer un mejor uso de los recursos generales de head() y foot() para aplicar a todas las celdas de encabezado y pie de página, puede especificar un identificador que tome el contexto de la ranura, que se define para contener tanto el field como la label . Aquí he usado context , pero puedes nombrarlo como quieras; también puede usar la desestructuración , como en la respuesta de tao .
<b-table :items="items" :fields="fields"> <template #head(age)="context"> {{ context.label }}<sup>1</sup> </template> </b-table> La documentación de los fields señala que "Cualquier propiedad adicional agregada a los objetos de definición de campo se mantendrá intacta", así que imagino que si este caso es común para usted, incluso podría agregar una propiedad de objeto de field personalizado (por ejemplo, note o superscript ) que luego lo renderizas como {{ context.label }}<sup v-if="context.field.note">{{ context.field.note }}</sup> .
0
Puede personalizar el marcado (html) de un encabezado de tabla usando la ranura #head({key}) provista:
<b-table> <template #head(age)="{ label }"> {{ label }} <sup>1</sup> </template> </b-table>Obviamente, puede colocar cualquier cosa allí, incluida una búsqueda de filtro en esa columna, etc. Todo es dinámico, conectado a su componente.
Algunos ejemplos aquí: Representación personalizada de encabezado y pie de página a través de espacios delimitados .
0
Me gustaría responder mi propia pregunta, gracias a la respuesta de @tao y el enlace que proporcionó. Es una ligera modificación a su respuesta.
https://bootstrap-vue.org/docs/components/table#header-and-footer-custom-rendering-via-scoped-slots
<b-table> <template #head(age)="data"> {{ data.label }} <sup>1</sup> </template> </b-table>