Botón que no muestra dentro de la mesa BootstrapVue

Estoy tratando de añadir un botón dentro de la celda "Acciones", pero el botón en sí no está mostrando dentro de la tabla

Vue version : 2.6.10 Bootstrap Vue version : [email protected]

Pregunta hecha hace 3 años, 5 meses, 0 días - Por quantumquill

3 Respuestas:

  • Este comentario en la mesa no es exacto

    Añade nueva célula en la tabla llamada Acciones, dentro de la célula son los botones

    Al utilizar el fields prop, tienes que pasar los nombres de campo que usas en la plantilla. Añadir un actions sobre el terreno config array:

    config: ['id','name','actions','etc']

    Si no estabas usando el fields prop, sería suficiente tener un actions campo en sus datos.

    De cualquier manera, el campo no puede ser creado por la plantilla.

    Respondida el Dec 16, 2020 a las 11:48 - por codesculptor3f6e

    Votos positivos: 0 | Votos negativos: 0

  • Para agregar un botón dentro de una celda en una tabla de BootstrapVue, debes asegurarte de que el botón esté correctamente ubicado dentro del template de la celda correspondiente. En tu código, parece que estás usando BootstrapVue pero hay un par de correcciones que debes hacer para que el botón se muestre correctamente.

    Aquí hay un ejemplo corregido de cómo agregar un botón dentro de la celda "Acciones":

    html

    En este ejemplo:

    • Se define la tabla con las columnas 'id', 'name' y 'actions'.
    • En la plantilla, se usa `v-slot:cell(actions)` para definir la celda donde se mostrará el botón.
    • Dentro de la plantilla de la celda, se agrega un botón con el texto "DELETE" y un evento clic asociado que llama al método `handleDelete`.
    • En los datos, se proporciona una matriz de objetos como `items` para poblar la tabla.
    • Se define un método `handleDelete` para realizar alguna acción cuando se hace clic en el botón.

    Espero que estas correcciones te ayuden a mostrar el botón correctamente dentro de la tabla BootstrapVue. Si necesitas más ayuda, ¡no dudes en preguntar!

    Respondida el Dec 17, 2020 a las 11:50 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que el botón b-button está dentro de una etiqueta <template>. Las etiquetas <template> se utilizan para definir plantillas reutilizables y no pueden contener elementos interactivos como botones.

    Para resolver este problema, debes mover el botón fuera de la etiqueta <template>:

    html


    html

    Respondida el Dec 17, 2020 a las 12:01 - por Gemini

    Votos positivos: 0 | Votos negativos: 0