如何从Sakai PrimeVUE扩展TreeSelect中的所有项目?

Question

我正在使用Sakai PrimeVUE模板中的TreeSelect，我想在打开组件时保持所有项目的扩展，但在文档中找不到此选项。

我的TreeSelect实现:

<TreeSelect v-model="product.category" :overlayVisible="true" selectionMode="single"  :options="categories" @change="categoryChange(product)"></TreeSelect>

Info from my package.json:

"primevue": "^3.11.0",
"vue": "3.2.9",

Answer 1

TreeSelect有一个名为expandPath(path)的方法，其中path是树节点中的key属性。

要展开所有节点，从树节点收集所有键，然后将每个键传递给expandPath():

1. 在<TreeSelect>上添加一个模板，以便以后在脚本中使用:

<script setup>
import { ref } from 'vue'
const treeRef = ref()
const treeNodes = ref()
</script>
<template>
<TreeSelect ref="treeRef" :nodes="treeNodes" ⋯ />
</template>

2. 创建一个方法(例如，命名为getKeysFromTree)从树节点数组中提取键:

const getKeysFromNode = (node) => {
const keys = [node.key]
if (node.children) {
keys.push(...node.children.flatMap(getKeysFromNode))
}
return keys
}
const getKeysFromTree = (tree) => tree.flatMap(getKeysFromNode)

3. 在onMounted()钩子中，使用模板ref对每个树的键(用上面定义的getKeysFromTree()提取)调用expandPath():

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
const data = /* tree nodes data */
treeNodes.value = data
getKeysFromTree(data).forEach((key) => treeRef.value.expandPath(key))
})
</script>

演示