I'm using TreeSelect from Sakai PrimeVUE template, I would like to keep all items expanded on open the component, but could not find this option in the documentation.
My TreeSelect implementation:
<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",
TreeSelect has a method named expandPath(path), where path is the key property in a tree node.
To expand all nodes, collect all the keys from the tree nodes, and then pass each of them to expandPath():
<TreeSelect> to use it later in script:<script setup>
import { ref } from 'vue'
const treeRef = ref()
const treeNodes = ref()
</script>
<template>
<TreeSelect ref="treeRef" :nodes="treeNodes" ⋯ />
</template>
getKeysFromTree) to extract the keys from an array of tree nodes:const getKeysFromNode = (node) => {
const keys = [node.key]
if (node.children) {
keys.push(...node.children.flatMap(getKeysFromNode))
}
return keys
}
const getKeysFromTree = (tree) => tree.flatMap(getKeysFromNode)
onMounted() hook, use the template ref to call expandPath() on each of the tree's keys (extracted with getKeysFromTree() defined above):<script setup>
import { onMounted } from 'vue'
onMounted(() => {
const data = /* tree nodes data */
treeNodes.value = data
getKeysFromTree(data).forEach((key) => treeRef.value.expandPath(key))
})
</script>