QTable Reusable Component
garbinmarcelo last edited by garbinmarcelo
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.
<list-records-table> <template v-slot:body-cell-actions="props"> test </template> </list-records-table>
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.
metalsadman last edited by metalsadman
@garbinmarcelo use something like this inside of your qtable wrapper, last child of it preferably.
<q-table ....> ... <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope" > <slot :name="slot" v-bind="scope" /> </template> </q-table>
garbinmarcelo last edited by
@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.
dobbel last edited by
How to extend templates in Vue:
Will not work with q-table I guess because it uses a render function…