Vuetify TreeView Создать таблицу

Question

Я пытаюсь создать древовидную структуру с помощью Vuetify. Я могу сделать стандартное дерево, но я хотел бы включить его в таблицу. Таким образом, помимо идентификатора, вы также можете просмотреть информацию, такую ​​как количество, имя et c и заполнить ее столбцами.

Как бы это сделать, пожалуйста?

Answer 1

Я сделал здесь пример на jsfiddle.

Шаблон древовидной структуры выглядит так:

  <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>

Данные для этого древовидного представления выглядят так (я добавил «id») и «количество» в качестве примера для узла publi c):

     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',
        },
      ],
    },  
  ],
})

Вы можете найти полный jsfiddle здесь: https://jsfiddle.net/ewatch/p81tdqwL/5/

I надеюсь, это поможет достичь того, что вы хотите сделать.