QTable Reusable Component

  • Hello, I would like to know how to reuse QTable without losing the function of template/slot.

    I created a component named “ListRecordsTable”, inside it I used the <q-table> component, made some customizations such as pagination, search, result per page.

    In this case, after customizing the way I would like, when I’m going to reuse this component I call it <list-records-table> so far it works well, but a question arose regarding the use of the template.

    I would like to change the color or add HTML tags within a given cell, if I use it directly in the <q-table> I would define a template within it, for example: <template v-slot: body-cell-actions=“props”>

    But then I would like to define these same templates that help to modify certain cells of the q-table within the parent component.

          <template v-slot:body-cell-actions="props">

    Could it be possible to do something related to this? If so, how could I do it?

    Edit.: I would also like to take the line value from the child component and send it to the parent component. Because the call is server side in the child component.

    I thank you for your help.

  • @garbinmarcelo use something like this inside of your qtable wrapper, last child of it preferably.

    <q-table ....>
            v-for="(_, slot) of $scopedSlots"

  • @metalsadman That’s right, it worked, I didn’t know that. Another question that arose, for example, I have customized within the <q-table> (child component) the action buttons template (delete, view, edit), it would be possible instead of overwriting this template just to add 1 more button(without losing the other buttons) via parent component?

    Thank you for your help.

  • @garbinmarcelo

    How to extend templates in Vue:


    Will not work with q-table I guess because it uses a render function…

Log in to reply