Vuetify Tree-view --- 获取父节点和子节点

Question

当我尝试在叶模式下的 Vuetify 树视图中选择一个节点时，我只得到 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

总而言之：使用selection-type="fix your god damn documentation"

我知道自从提出这个问题以来已经过去了一段时间，但我实际上发现了一些有趣的东西也有同样的问题

事实证明，只需更改一行代码即可达到所需的结果

您只需指定selection-type为不是leaf或 的任何字符串independent。请注意，selection-type为了获得所需的结果，不得省略（否则将默认为leaf）

就我个人而言，我用来fix your god damn documentation缓解我对所说的事情的挫败感（在那里找不到有关所描述行为的信息）

引导我找到该解决方案的地方：https://gitmemory.com/issue/vuetifyjs/vuetify/9088/543108633

代码笔： https: //codepen.io/liath44/pen/RwoKxVB

Answer 2

问题是 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,
})