Question

当我尝试在叶子模式下的Vuetify树视图中选择一个节点时，我仅在v模型中得到叶子节点。有没有一种方法可以使所有子节点以及所选的父节点一起获得。

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,
})

Answer 2

TLDR：使用 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

Vuetify树视图---获取父节点和子节点

2 个答案: