0
248
VistasMostrar información sobre herramientas cuando el usuario mueve el mouse sobre el nombre de la columna de la tabla bootstrap-vue
Tengo una tabla bootstrap-vue que se parece a esto;
Aquí está el código de la tabla;
<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> Esto es lo que quiero hacer. Cuando el usuario mueve el mouse a la celda de nombre de la columna First Name , quiero mostrar una información sobre herramientas que dice "Haga clic para ordenar el Nombre".
estoy usando vue v2.6
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Con la ayuda del componente b-tooltip de bootstrap-vue , puede hacerlo como el siguiente código:
<template> <div> <b-table striped hover :items="items" :fields="fields"></b-table> <!-- using "b-tooltip" component that targets the defined "id" in the fields of "b-table" --> <b-tooltip target="myHeader" triggers="hover" container="myHeader"> Click to sort First Name </b-tooltip> </div> </template> <script> export default { name: "CompoTable", data() { return { // Note 'isActive' is left out and will not appear in the rendered table fields: [ { key: 'last_name', sortable: true }, { key: 'first_name', /* ------------------------------ */ /* I changed sortable to "true" to make sorting */ /* ------------------------------ */ sortable: true, /* ------------------------------ */ /* add this to add "id" to "th" tag related to "first name" */ /* ------------------------------ */ thAttr: { id: "myHeader" } }, { 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>También necesita la propiedad de campo thAttr para agregar "id" a la columna de nombre en la definición de su tabla.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta