QTable Reusable Component

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.

Example:
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.
example:

<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

@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

@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

@garbinmarcelo

How to extend templates in Vue:

https://vuejsdevelopers.com/2020/02/24/extending-vuejs-components-templates/

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

No More Posting New Topics!

QTable Reusable Component