設定v-treeview的多個子項屬性的方法

Question

假設我有以下結構的變數items：[{id:1,name:'value1',item_nested:[{id:2,name:'value2',},{id:3,name:'value3',nested_item: [{id:4,name:'value4'}]}]}]在v-treeview中，我們有一個名為item-children的props，它接受一個字串，它允許設定哪個屬性將作為子項引用。在第一

P粉850680329 · Answer

VTreeView使用一個string作為子項的鍵，所以- 在不擴展/覆蓋原始組件的情況下- 我看不到為子項提供替代鍵的方法。

但是，你總是可以將你想要在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'
            }]
          }
        ]
      }]
    }
  },
})