wonderful-panda/vue-tsx-support

How scoped slots works

Closed this issue · 2 comments

linuxing3 commented

In VDataTable of vuetify-tsx based on vue-tsx-support, how to show data in table body with slots? Any examples?

            <VDataTable items={mockItems} headers={mockHeaders}>
              <tr slot={"mockHeaders"} scopedSlots={{ props: (props)=> ... }} >
              </tr>
            </VDataTable>

How did the slots work?
Thanks!

wonderful-panda commented

File issue to vueify-tsx repository.

Maxim-Mazurok commented

This is how I use VDataTable with scoped and named slots in tsx:

<VDataTable
  ...
  scopedSlots={{
    "item.name": ({ item }) => (
      <span>
        <VIcon small class="mr-1" style={{ verticalAlign: "text-top" }}>
          {item.file ? mdiFileDocumentOutline : mdiFolder}
        </VIcon>
        {item.name}
      </span>
    ),
    header: (attrs) => <VDataTableHeader {...attrs} sortIcon={mdiArrowDown} />,
  }}
>
  <template slot="no-data">
    <VSubheader>Empty table</VSubheader>
  </template>
</VDataTable>

hope this will help someone

  • 👍2