CODEWITHSUNDEEP
javascriptvue.jstreeviewvue-componentvuetify.js
Jackruleskk
Jackruleskk

Reputation: 3

Vuetify TreeView Create Table

I am trying to create a treeview using Vuetify. I can make the standard treeview, but I would like to incorporate it within a table. Thus, besides the ID, you can also pull through information like quantity, name etc and have it populate columns.

How would this be done please?

Upvotes: 0

Views: 3560

Answers (1)

ewatch
ewatch

Reputation: 136

I made an example here on jsfiddle.

The template of the treeview looks like that:

  <v-treeview v-model="tree" :open="open" :items="items" activatable item-key="name" open-on-click>
    <template v-slot:prepend="{ item, open }">
      <v-icon v-if="!item.file">
        {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
      </v-icon>
      <v-icon v-else>
        {{ files[item.file] }}
      </v-icon>
    </template>
    <template v-slot:append="{ item }">
      ID: {{ item.id }}, Quantity: {{ item.quantity }}
    </template>
  </v-treeview>

The data for this treeview looks like that (I added an "id" and a "quantity" as an example to the public node):

     data: () => ({
  open: ['public'],
  files: {
    html: 'mdi-language-html5',
    js: 'mdi-nodejs',
    json: 'mdi-json',
    md: 'mdi-markdown',
    pdf: 'mdi-file-pdf',
    png: 'mdi-file-image',
    txt: 'mdi-file-document-outline',
    xls: 'mdi-file-excel',
  },
  tree: [],
  items: [
    {
      name: '.git',
    },
    {
      name: 'node_modules',
    },
    {
      id: 123,
      name: 'public',
      quantity: 3,
      children: [
        {
          name: 'static',
          children: [{
            name: 'logo.png',
            file: 'png',
          }],
        },
        {
          name: 'favicon.ico',
          file: 'png',
        },
        {
          name: 'index.html',
          file: 'html',
        },
      ],
    },  
  ],
})

You can find the full jsfiddle here: https://jsfiddle.net/ewatch/p81tdqwL/5/

I hope it helps to achieve what you want to do.

Upvotes: 3

Related Questions