Блог

Главная - Вопросы по программированию - Как установить свойство нескольких дочерних элементов для v-treeview

Как установить свойство нескольких дочерних элементов для v-treeview

#javascript #vue.js #treeview #vuetify.js

Вопрос:

Предположим, у меня есть переменные элементы, структурированные, как показано ниже:

 [
  {
    id: 1,
    name: 'value1',
    item_nested: [
      {
        id: 2,
        name: 'value2',
      },
      {
        id: 3,
        name: 'value3',
        nested_item: [
          {
            id: 4,
            name: 'value4'
          }
        ]
      }
    ]
  }
]

В v-treeview у нас есть элемент реквизита-дочерние элементы, которые принимают строку, это позволяет установить свойство withc, которое будет использоваться в качестве ссылки на дочерние элементы. на первом уровне я хочу, чтобы свойство item_nested было дочерним, а на втором уровне я хочу nested_item быть дочерним, но можно ли установить несколько значений для дочерних элементов?

Ответ №1:

VTreeView использует один string ключ в качестве ключа для детей, поэтому — без расширения / перезаписи исходного компонента — я не вижу способа предоставить ему альтернативные ключи для детей.

Но вы всегда можете «повторно ввести» объект, который хотите отобразить в a VTreeview (этот фрагмент работает только в данном конкретном случае, но его можно обобщить).:

 new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  computed: {
    // "re-keying" items:
    modifiedTreeviewItems() {
      const updateItemKeys = (items) => {
        if (!items.length) return []

        const mapped = items.map((item) => {
          const {
            item_nested = [], nested_item = [], ...rest
          } = item
          const children = item_nested.length ? item_nested : nested_item.length ? nested_item : []
          return {
            ...rest,
            children: updateItemKeys(children),
          }
        })
        return mapped
      }
      return updateItemKeys(this.treeviewItems)
    },
  },
  data() {
    return {
      treeviewItems: [{
        id: 1,
        name: 'value1',
        item_nested: [{
            id: 2,
            name: 'value2',
          },
          {
            id: 3,
            name: 'value3',
            nested_item: [{
              id: 4,
              name: 'value4'
            }]
          }
        ]
      }]
    }
  },
}) 
 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-treeview :items="modifiedTreeviewItems" />
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
Метки: