vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #367 - Ability to activate PanelMenu item declaratively or programmatically

pull/1281/head
Cagatay Civici 2021-05-17 18:44:09 +03:00
parent 62d8c7a448
commit c04098e4fe
9 changed files with 720 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/panelmenu.js
View File

@ -4,6 +4,12 @@ const PanelMenuProps = [
type: "array", type: "array",
default: "null", default: "null",
description: "An array of menuitems." description: "An array of menuitems."
},
{
name: "expandedKeys",
type: "array",
default: "null",
description: "A map of keys to represent the expansion state in controlled mode."
} }
]; ];

2
api-generator/components/tree.js
View File

@ -9,7 +9,7 @@ const TreeProps = [
name: "expandedKeys", name: "expandedKeys",
type: "array", type: "array",
default: "null", default: "null",
description: "A map of keys to represent the state of the tree expansion state in controlled mode." description: "A map of keys to represent the expansion state in controlled mode."
}, },
{ {
name: "selectionMode", name: "selectionMode",

1
src/components/panelmenu/PanelMenu.d.ts vendored
View File

@ -1,5 +1,6 @@
interface PanelMenuProps { interface PanelMenuProps {
model?: any[]; model?: any[];
expandedKeys?: any;
} }
declare class PanelMenu { declare class PanelMenu {

27
src/components/panelmenu/PanelMenu.vue
View File

@ -20,10 +20,11 @@
<component v-else :is="$slots.item" :item="item"></component> <component v-else :is="$slots.item" :item="item"></component>
</div> </div>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="item === activeItem" <div class="p-toggleable-content" v-show="isActive(item)"
role="region" :id="ariaId +'_content' " :aria-labelledby="ariaId +'_header'"> role="region" :id="ariaId +'_content' " :aria-labelledby="ariaId +'_header'">
<div class="p-panelmenu-content" v-if="item.items"> <div class="p-panelmenu-content" v-if="item.items">
<PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item" /> <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item"
:expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" />
</div> </div>
</div> </div>
</transition> </transition>
@ -38,10 +39,15 @@ import {UniqueComponentId} from 'primevue/utils';
export default { export default {
name: 'PanelMenu', name: 'PanelMenu',
emits: ['update:expandedKeys'],
props: { props: {
model: { model: {
type: Array, type: Array,
default: null default: null
},
expandedKeys: {
type: null,
default: null
} }
}, },
data() { data() {
@ -68,10 +74,25 @@ export default {
else else
this.activeItem = item; this.activeItem = item;
this.updateExpandedKeys({item: item, expanded: this.activeItem != null});
if (item.to && navigate) { if (item.to && navigate) {
navigate(event); navigate(event);
} }
}, },
updateExpandedKeys(event) {
if (this.expandedKeys) {
let item = event.item;
let _keys = {...this.expandedKeys};
if (event.expanded)
_keys[item.key] = true;
else
delete _keys[item.key];
this.$emit('update:expandedKeys', _keys);
}
},
getPanelClass(item) { getPanelClass(item) {
return ['p-panelmenu-panel', item.class]; return ['p-panelmenu-panel', item.class];
}, },
@ -83,7 +104,7 @@ export default {
return ['p-menuitem-icon', item.icon]; return ['p-menuitem-icon', item.icon];
}, },
isActive(item) { isActive(item) {
return item === this.activeItem; return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
}, },
getHeaderClass(item) { getHeaderClass(item) {
return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item), 'p-disabled': item.disabled}]; return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item), 'p-disabled': item.disabled}];

14
src/components/panelmenu/PanelMenuSub.vue
View File

@ -18,8 +18,9 @@
</template> </template>
<component v-else :is="template" :item="item"></component> <component v-else :is="template" :item="item"></component>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="item === activeItem"> <div class="p-toggleable-content" v-show="isActive(item)">
<PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template" /> <PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
:expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" />
</div> </div>
</transition> </transition>
</li> </li>
@ -31,6 +32,7 @@
<script> <script>
export default { export default {
name: 'PanelMenuSub', name: 'PanelMenuSub',
emits: ['item-toggle'],
props: { props: {
model: { model: {
type: null, type: null,
@ -39,6 +41,10 @@ export default {
template: { template: {
type: Object, type: Object,
default: null default: null
},
expandedKeys: {
type: null,
default: null
} }
}, },
data() { data() {
@ -65,6 +71,8 @@ export default {
else else
this.activeItem = item; this.activeItem = item;
this.$emit('item-toggle', {item: item, expanded: this.activeItem != null});
if (item.to && navigate) { if (item.to && navigate) {
navigate(event); navigate(event);
} }
@ -76,7 +84,7 @@ export default {
return ['p-menuitem-link', {'p-disabled': item.disabled}]; return ['p-menuitem-link', {'p-disabled': item.disabled}];
}, },
isActive(item) { isActive(item) {
return item === this.activeItem; return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
}, },
getSubmenuIcon(item) { getSubmenuIcon(item) {
const active = this.isActive(item); const active = this.isActive(item);

6
src/views/menumodel/MenuModel.vue
View File

@ -110,6 +110,12 @@ const items: [
<td>null</td> <td>null</td>
<td>Style class of the menuitem.</td> <td>Style class of the menuitem.</td>
</tr> </tr>
<tr>
<td>key</td>
<td>object</td>
<td>null</td>
<td>Unique identifier of an item.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

266
src/views/panelmenu/PanelMenuDemo.vue
View File

@ -10,7 +10,15 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<PanelMenu :model="items" /> <h5>Default</h5>
<PanelMenu :model="items" />
<h5>Programmatic</h5>
<div class="p-mb-3">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
<PanelMenu :model="items" v-model:expandedKeys="expandedKeys" />
</div> </div>
</div> </div>
@ -24,128 +32,164 @@ import PanelMenuDoc from './PanelMenuDoc';
export default { export default {
data() { data() {
return { return {
items: [ expandedKeys: {},
{ items: [{
label: 'File', key: '0',
icon:'pi pi-fw pi-file', label: 'File',
items: [ icon: 'pi pi-fw pi-file',
{ items: [{
label: 'New', key: '0_0',
icon:'pi pi-fw pi-plus', label: 'New',
items: [ icon: 'pi pi-fw pi-plus',
{ items: [{
label: 'Bookmark', key: '0_0_0',
icon:'pi pi-fw pi-bookmark' label: 'Bookmark',
}, icon: 'pi pi-fw pi-bookmark'
{ },
label: 'Video', {
icon:'pi pi-fw pi-video' key: '0_0_1',
} label: 'Video',
] icon: 'pi pi-fw pi-video'
}, }
{ ]
label: 'Delete', },
icon:'pi pi-fw pi-trash' {
}, key: '0_1',
{ label: 'Delete',
label: 'Export', icon: 'pi pi-fw pi-trash'
icon:'pi pi-fw pi-external-link' },
} {
] key: '0_2',
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
}, },
{ {
label: 'Edit', key: '1',
icon:'pi pi-fw pi-pencil', label: 'Edit',
items: [ icon: 'pi pi-fw pi-pencil',
{ items: [{
label: 'Left', key: '1_0',
icon:'pi pi-fw pi-align-left' label: 'Left',
}, icon: 'pi pi-fw pi-align-left'
{ },
label: 'Right', {
icon:'pi pi-fw pi-align-right' key: '1_1',
}, label: 'Right',
{ icon: 'pi pi-fw pi-align-right'
label: 'Center', },
icon:'pi pi-fw pi-align-center' {
}, key: '1_2',
{ label: 'Center',
label: 'Justify', icon: 'pi pi-fw pi-align-center'
icon:'pi pi-fw pi-align-justify' },
} {
] key: '1_3',
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
}, },
{ {
label: 'Users', key: '2',
icon:'pi pi-fw pi-user', label: 'Users',
items: [ icon: 'pi pi-fw pi-user',
{ items: [{
label: 'New', key: '2_0',
icon:'pi pi-fw pi-user-plus', label: 'New',
icon: 'pi pi-fw pi-user-plus',
}, },
{ {
label: 'Delete', key: '2_1',
icon:'pi pi-fw pi-user-minus', label: 'Delete',
}, icon: 'pi pi-fw pi-user-minus',
{ },
label: 'Search', {
icon:'pi pi-fw pi-users', key: '2_2',
items: [ label: 'Search',
{ icon: 'pi pi-fw pi-users',
label: 'Filter', items: [{
icon:'pi pi-fw pi-filter', key: '2_2_0',
items: [ label: 'Filter',
{ icon: 'pi pi-fw pi-filter',
label: 'Print', items: [{
icon:'pi pi-fw pi-print' key: '2_2_0_0',
} label: 'Print',
] icon: 'pi pi-fw pi-print'
}, }]
{ },
icon:'pi pi-fw pi-bars', {
label: 'List' key: '2_2_1',
} icon: 'pi pi-fw pi-bars',
] label: 'List'
} }
] ]
}
]
}, },
{ {
label: 'Events', key: '3',
icon:'pi pi-fw pi-calendar', label: 'Events',
items: [ icon: 'pi pi-fw pi-calendar',
{ items: [{
label: 'Edit', key: '3_0',
icon:'pi pi-fw pi-pencil', label: 'Edit',
items: [ icon: 'pi pi-fw pi-pencil',
{ items: [{
label: 'Save', key: '3_0_0',
icon:'pi pi-fw pi-calendar-plus' label: 'Save',
}, icon: 'pi pi-fw pi-calendar-plus'
{ },
label: 'Delete', {
icon:'pi pi-fw pi-calendar-minus' key: '3_0_0',
} label: 'Delete',
] icon: 'pi pi-fw pi-calendar-minus'
}, }
{ ]
label: 'Archieve', },
icon:'pi pi-fw pi-calendar-times', {
items: [ key: '3_1',
{ label: 'Archieve',
label: 'Remove', icon: 'pi pi-fw pi-calendar-times',
icon:'pi pi-fw pi-calendar-minus' items: [{
} key: '3_1_0',
] label: 'Remove',
} icon: 'pi pi-fw pi-calendar-minus'
] }]
}
]
} }
] ]
}
},
methods: {
expandAll() {
for (let node of this.items) {
this.expandNode(node);
}
this.expandedKeys = {
...this.expandedKeys
};
},
collapseAll() {
this.expandedKeys = {};
},
expandNode(node) {
if (node.items && node.items.length) {
this.expandedKeys[node.key] = true;
for (let child of node.items) {
this.expandNode(child);
}
}
} }
}, },
components: { components: {
'PanelMenuDoc': PanelMenuDoc 'PanelMenuDoc': PanelMenuDoc
} }
} }
</script> </script>

740
src/views/panelmenu/PanelMenuDoc.vue
View File

@ -16,6 +16,7 @@ import PanelMenu from 'primevue/panelmenu';
</code></pre> </code></pre>
<div style="height: 400px; overflow:auto">
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
@ -142,6 +143,7 @@ export default {
} }
</code></pre> </code></pre>
</div>
<h5>Templating</h5> <h5>Templating</h5>
<p>PanelMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p> <p>PanelMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
@ -152,11 +154,207 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/PanelMenu&gt; &lt;/PanelMenu&gt;
</template> </template>
</code></pre>
<h5>Programmatic Control</h5>
<p>If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys
that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
</p>
<p>Example below expands and collapses all nodes with buttons.</p>
<pre v-code><code><template v-pre>
&lt;div&gt;
&lt;Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /&gt;
&lt;Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /&gt;
&lt;/div&gt;
&lt;PanelMenu :model="items" v-model:expandedKeys="expandedKeys""&gt;&lt;/PanelMenu&gt;
</template>
</code></pre>
<div style="height: 400px; overflow:auto">
<pre v-code.script><code>
export default {
data() {
return {
items: [{
key: '0',
label: 'File',
icon: 'pi pi-fw pi-file',
items: [{
key: '0_0',
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [{
key: '0_0_0',
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
key: '0_0_1',
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
key: '0_1',
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
key: '0_2',
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
key: '1',
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [{
key: '1_0',
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
key: '1_1',
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
key: '1_2',
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
key: '1_3',
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
key: '2',
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [{
key: '2_0',
label: 'New',
icon: 'pi pi-fw pi-user-plus',
},
{
key: '2_1',
label: 'Delete',
icon: 'pi pi-fw pi-user-minus',
},
{
key: '2_2',
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [{
key: '2_2_0',
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [{
key: '2_2_0_0',
label: 'Print',
icon: 'pi pi-fw pi-print'
}]
},
{
key: '2_2_1',
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
key: '3',
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [{
key: '3_0',
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [{
key: '3_0_0',
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
key: '3_0_0',
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
key: '3_1',
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [{
key: '3_1_0',
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}]
}
]
}
],
expandedKeys: {}
}
},
methods: {
expandAll() {
for (let node of this.items) {
this.expandNode(node);
}
this.expandedKeys = {
...this.expandedKeys
};
},
collapseAll() {
this.expandedKeys = {};
},
expandNode(node) {
if (node.items && node.items.length) {
this.expandedKeys[node.key] = true;
for (let child of node.items) {
this.expandNode(child);
}
}
}
}
}
</code></pre>
</div>
<p class="p-mt-3">In order to display some nodes as expanded by default, simply add their keys to the map.</p>
<pre v-code.script><code>
export default {
data() {
return {
items: //menu model instance,
expandedKeys: {}
}
},
mounted() {
this.expandedKeys[this.items[0.key]] = true;
}
}
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
@ -172,6 +370,12 @@ export default {
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>An array of menuitems.</td> <td>An array of menuitems.</td>
</tr>
<tr>
<td>expandedKeys</td>
<td>array</td>
<td>null</td>
<td>A map of keys to represent the expansion state in controlled mode.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -257,7 +461,15 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<PanelMenu :model="items" /> <h5>Default</h5>
<PanelMenu :model="items" />
<h5>Programmatic</h5>
<div class="p-mb-3">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
<PanelMenu :model="items" :expandedKeys="expandedKeys" />
</div> </div>
</template> </template>
@ -265,123 +477,159 @@ export default {
export default { export default {
data() { data() {
return { return {
items: [ expandedKeys: {},
{ items: [{
label: 'File', key: '0',
icon:'pi pi-fw pi-file', label: 'File',
items: [ icon: 'pi pi-fw pi-file',
{ items: [{
label: 'New', key: '0_0',
icon:'pi pi-fw pi-plus', label: 'New',
items: [ icon: 'pi pi-fw pi-plus',
{ items: [{
label: 'Bookmark', key: '0_0_0',
icon:'pi pi-fw pi-bookmark' label: 'Bookmark',
}, icon: 'pi pi-fw pi-bookmark'
{ },
label: 'Video', {
icon:'pi pi-fw pi-video' key: '0_0_1',
} label: 'Video',
] icon: 'pi pi-fw pi-video'
}, }
{ ]
label: 'Delete', },
icon:'pi pi-fw pi-trash' {
}, key: '0_1',
{ label: 'Delete',
label: 'Export', icon: 'pi pi-fw pi-trash'
icon:'pi pi-fw pi-external-link' },
} {
] key: '0_2',
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
}, },
{ {
label: 'Edit', key: '1',
icon:'pi pi-fw pi-pencil', label: 'Edit',
items: [ icon: 'pi pi-fw pi-pencil',
{ items: [{
label: 'Left', key: '1_0',
icon:'pi pi-fw pi-align-left' label: 'Left',
}, icon: 'pi pi-fw pi-align-left'
{ },
label: 'Right', {
icon:'pi pi-fw pi-align-right' key: '1_1',
}, label: 'Right',
{ icon: 'pi pi-fw pi-align-right'
label: 'Center', },
icon:'pi pi-fw pi-align-center' {
}, key: '1_2',
{ label: 'Center',
label: 'Justify', icon: 'pi pi-fw pi-align-center'
icon:'pi pi-fw pi-align-justify' },
} {
] key: '1_3',
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
}, },
{ {
label: 'Users', key: '2',
icon:'pi pi-fw pi-user', label: 'Users',
items: [ icon: 'pi pi-fw pi-user',
{ items: [{
label: 'New', key: '2_0',
icon:'pi pi-fw pi-user-plus', label: 'New',
icon: 'pi pi-fw pi-user-plus',
}, },
{ {
label: 'Delete', key: '2_1',
icon:'pi pi-fw pi-user-minus', label: 'Delete',
}, icon: 'pi pi-fw pi-user-minus',
{ },
label: 'Search', {
icon:'pi pi-fw pi-users', key: '2_2',
items: [ label: 'Search',
{ icon: 'pi pi-fw pi-users',
label: 'Filter', items: [{
icon:'pi pi-fw pi-filter', key: '2_2_0',
items: [ label: 'Filter',
{ icon: 'pi pi-fw pi-filter',
label: 'Print', items: [{
icon:'pi pi-fw pi-print' key: '2_2_0_0',
} label: 'Print',
] icon: 'pi pi-fw pi-print'
}, }]
{ },
icon:'pi pi-fw pi-bars', {
label: 'List' key: '2_2_1',
} icon: 'pi pi-fw pi-bars',
] label: 'List'
} }
] ]
}
]
}, },
{ {
label: 'Events', key: '3',
icon:'pi pi-fw pi-calendar', label: 'Events',
items: [ icon: 'pi pi-fw pi-calendar',
{ items: [{
label: 'Edit', key: '3_0',
icon:'pi pi-fw pi-pencil', label: 'Edit',
items: [ icon: 'pi pi-fw pi-pencil',
{ items: [{
label: 'Save', key: '3_0_0',
icon:'pi pi-fw pi-calendar-plus' label: 'Save',
}, icon: 'pi pi-fw pi-calendar-plus'
{ },
label: 'Delete', {
icon:'pi pi-fw pi-calendar-minus' key: '3_0_0',
} label: 'Delete',
] icon: 'pi pi-fw pi-calendar-minus'
}, }
{ ]
label: 'Archieve', },
icon:'pi pi-fw pi-calendar-times', {
items: [ key: '3_1',
{ label: 'Archieve',
label: 'Remove', icon: 'pi pi-fw pi-calendar-times',
icon:'pi pi-fw pi-calendar-minus' items: [{
} key: '3_1_0',
] label: 'Remove',
} icon: 'pi pi-fw pi-calendar-minus'
] }]
}
]
} }
] ]
}
},
methods: {
expandAll() {
for (let node of this.items) {
this.expandNode(node);
}
this.expandedKeys = {
...this.expandedKeys
};
},
collapseAll() {
this.expandedKeys = {};
},
expandNode(node) {
if (node.items && node.items.length) {
this.expandedKeys[node.key] = true;
for (let child of node.items) {
this.expandNode(child);
}
}
} }
} }
} }
@ -399,7 +647,15 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<PanelMenu :model="items" /> <h5>Default</h5>
<PanelMenu :model="items" />
<h5>Programmatic</h5>
<div class="p-mb-3">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
<PanelMenu :model="items" :expandedKeys="expandedKeys" />
</div> </div>
</template> </template>
@ -408,124 +664,158 @@ import { ref } from 'vue';
export default { export default {
setup() { setup() {
const items = ref([ const expandedKeys = ref({});
{ const items = ref([{
label: 'File', key: '0',
icon:'pi pi-fw pi-file', label: 'File',
items: [ icon: 'pi pi-fw pi-file',
{ items: [{
label: 'New', key: '0_0',
icon:'pi pi-fw pi-plus', label: 'New',
items: [ icon: 'pi pi-fw pi-plus',
{ items: [{
label: 'Bookmark', key: '0_0_0',
icon:'pi pi-fw pi-bookmark' label: 'Bookmark',
}, icon: 'pi pi-fw pi-bookmark'
{ },
label: 'Video',
icon:'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon:'pi pi-fw pi-trash'
},
{
label: 'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon:'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon:'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon:'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon:'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon:'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon:'pi pi-fw pi-user',
items: [
{
label: 'New',
icon:'pi pi-fw pi-user-plus',
},
{
label: 'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label: 'Search',
icon:'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon:'pi pi-fw pi-filter',
items: [
{ {
label: 'Print', key: '0_0_1',
icon:'pi pi-fw pi-print' label: 'Video',
icon: 'pi pi-fw pi-video'
} }
] ]
}, },
{ {
icon:'pi pi-fw pi-bars', key: '0_1',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon:'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon:'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete', label: 'Delete',
icon:'pi pi-fw pi-calendar-minus' icon: 'pi pi-fw pi-trash'
} },
] {
}, key: '0_2',
{ label: 'Export',
label: 'Archieve', icon: 'pi pi-fw pi-external-link'
icon:'pi pi-fw pi-calendar-times', }
items: [ ]
{ },
label: 'Remove', {
icon:'pi pi-fw pi-calendar-minus' key: '1',
} label: 'Edit',
] icon: 'pi pi-fw pi-pencil',
} items: [{
] key: '1_0',
} label: 'Left',
]); icon: 'pi pi-fw pi-align-left'
},
{
key: '1_1',
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
key: '1_2',
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
key: '1_3',
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
key: '2',
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [{
key: '2_0',
label: 'New',
icon: 'pi pi-fw pi-user-plus',
return { items } },
{
key: '2_1',
label: 'Delete',
icon: 'pi pi-fw pi-user-minus',
},
{
key: '2_2',
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [{
key: '2_2_0',
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [{
key: '2_2_0_0',
label: 'Print',
icon: 'pi pi-fw pi-print'
}]
},
{
key: '2_2_1',
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
key: '3',
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [{
key: '3_0',
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [{
key: '3_0_0',
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
key: '3_0_0',
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
key: '3_1',
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [{
key: '3_1_0',
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}]
}
]
}
]);
const expandAll = () => {
for (let node of nodes.value) {
expandNode(node);
}
expandedKeys.value = {...expandedKeys.value};
};
const collapseAll = () => {
expandedKeys.value = {};
};
const expandNode = (node) => {
if (node.children && node.children.length) {
expandedKeys.value[node.key] = true;
for (let child of node.children) {
expandNode(child);
}
}
};
return { items, expandedKeys, expandAll, collapseAll, expandNode }
} }
} }
<\\/script> <\\/script>

2
src/views/tree/TreeDoc.vue
View File

@ -593,7 +593,7 @@ export default {
<td>expandedKeys</td> <td>expandedKeys</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>A map of keys to represent the state of the tree expansion state in controlled mode.</td> <td>A map of keys to represent the expansion state in controlled mode.</td>
</tr> </tr>
<tr> <tr>
<td>selectionMode</td> <td>selectionMode</td>