vue.js - Vuetify Tree-view --- 获取父节点和子节点

Question

当我尝试在叶模式下的 Vuetify TreeView 中选择一个节点时，我只得到 v-model 中的叶节点。有没有办法让我可以将所有子节点与选定的父节点一起获取。

Vuetify 版本:2.2.18

代码链接:https://codepen.io/pen/?&editable=true&editors=101

选择后的结果:



实际结果:

Child #1
Child #2
Grandchild #1
Grandchild #2

预期结果:

Root
Child #1
Child #2
Child #3
Grandchild #1
Grandchild #2

Answer 1

问题是 vuetify 删除了父节点，因为它们包含所有子节点。一种解决方案是构建 items 的计算平展副本。包含对父节点的引用。

然后可以通过第二个计算属性( _selection )递归循环，该属性添加所选项目的父项。

工作示例:https://codepen.io/ellisdod/pen/MWwqYBB?editors=1010

  computed : {
    _items () {
       const replaceChildren = (obj,parent) => {
         const clone = Object.assign({},obj)
         delete clone.children
         if (parent) clone.parent = parent
         return clone
       }

       const addItems = (arr,parent) => {
         const items = arr.reduce((acc,x)=>{

           acc.push(replaceChildren(x,parent))

           if (x.children) {
             acc.push(addItems(x.children, x.id))
           }
           return acc
         },[])

         return items.flat()
       }

       return addItems(this.items).reduce((acc,x)=>{
         acc[x.id]=x
         return acc
       },{})
    },
    _selection () {
       const proxy = {}
       addParents = (x, all) => {
         const parentId = this._items[x.id].parent
         if (parentId) {
           if (all) addParents(this._items[parentId])
           proxy[parentId] = this._items[parentId]
         }
       }
       this.selection.forEach(x=>{
         addParents(x,this.allParentNodes)
         proxy[x.id] = x
       })
      return Object.values(proxy)
    }
  }, 

编辑:

可以使用 allParentNodes 属性切换递归。

data : ()=> ({
  allParentNodes : true,
})