Вид дерева Vuetify: выберите элементы в соответствии с их типом (у меня есть файлы и папки в дереве, и я хочу выбрать только файлы) - PullRequest
Новая
       35

Вид дерева Vuetify: выберите элементы в соответствии с их типом (у меня есть файлы и папки в дереве, и я хочу выбрать только файлы)

0 голосов
/ 08 мая 2019

Я создаю представление дерева, используя Vuetify , чтобы вывести список моих папок и файлов, как показано на изображении ниже.

Дерево построено правильно, но когда я выбираю папки ифайлы, оба сохранены в моем списке this.selectedDrds.

Я хотел бы сохранить в своем списке (т.е. выбрать по дереву) только файлы (например, CBERS ... файлы), а не папки (например, 2018_04 или AWFI).

Я используюJSON для создания дерева, и для каждого child (т.е. папки или файла) у меня есть атрибут type, который описывает, будет ли этот child папкой или файлом.

Я думал вРешение, которое будет показывать только папки, которые имеют файлы и не показывают пустые папки, но одно требование состоит в том, чтобы показать все папки (пустые или нет), к сожалению.

Кто-нибудь знает, как я могу это сделать?

Я даю код ниже.

Заранее спасибо.

просмотр дерева

enter image description here

пример дерева JSON 

this.drdTree = [
    {
      "children": [
        {
          "path": "/DRD/CBERS4/2015_01",
          "text": "2015_01",
          "type": "folder"
        },
        {
          "children": [
            {
              "path": "/DRD/CBERS4/2017_09/AWFI",
              "text": "AWFI",
              "type": "folder"
            }
          ],
          "path": "/DRD/CBERS4/2017_09",
          "text": "2017_09",
          "type": "folder"
        },
        {
          "children": [
            {
              "children": [
                {
                  "path": "/DRD/CBERS4/2018_10/AWFI",
                  "text": "CBERS_4_AWFI_DRD_2018_10_23.14_29_30_CB11",
                  "type": "file"
                },
                {
                  "path": "/DRD/CBERS4/2018_10/AWFI",
                  "text": "CBERS_4_AWFI_DRD_2018_10_02.14_58_30_CB11",
                  "type": "file"
                }
              ],
              "path": "/DRD/CBERS4/2018_10/AWFI",
              "text": "AWFI",
              "type": "folder"
            }
          ],
          "path": "/DRD/CBERS4/2018_10",
          "text": "2018_10",
          "type": "folder"
        }
      ],
      "path": "/DRD/CBERS4",
      "text": "CBERS4",
      "type": "folder"
    }
]

код 

<template>
    <div>

      <v-form>
        <v-container>

          <!-- Tree view / Start -->
          <v-layout v-if='showDrdTree' row wrap>
            <!-- Tree view -->
            <v-treeview
              v-model="selectedDrds"
              :open="open"
              :items="drdTree"
              activatable
              item-key='id'
              item-text='text'
              open-on-click
              selectable
            >
              <template v-slot:prepend="{ item, open }">
                <v-icon v-if="item.type == 'folder'">
                  {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
                </v-icon>
                <v-icon v-else>
                  {{ files[item.type] }}
                </v-icon>
              </template>
            </v-treeview>

          </v-layout>

        </v-container>
      </v-form>

    </div>
</template>

<script>
export default {
  data () {
    return {
      // DRD tree
      open: [],
      files: {
        file: 'mdi-file-document-outline'
      },
      drdTree: [],
      selectedDrds: [],
      showDrdTree: false
    }
  }
}
</script>
...