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

Column toggle demo update to keep order

pull/496/head
Cagatay Civici 2020-09-24 14:06:30 +03:00
parent 0db8f3f17c
commit a16779a64c
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/treetable/TreeTableColToggleDemo.vue
View File

@ -12,11 +12,11 @@
<TreeTable :value="nodes"> <TreeTable :value="nodes">
<template #header> <template #header>
<div style="text-align:left"> <div style="text-align:left">
<MultiSelect v-model="columns" :options="columnOptions" optionLabel="header" placeholder="Select Columns" style="width: 20em"/> <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" placeholder="Select Columns" style="width: 20em"/>
</div> </div>
</template> </template>
<Column field="name" header="Name" :expander="true"></Column> <Column field="name" header="Name" :expander="true"></Column>
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column> <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
</TreeTable> </TreeTable>
</div> </div>
</div> </div>
@ -29,11 +29,11 @@
&lt;TreeTable :value="nodes"&gt; &lt;TreeTable :value="nodes"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div style="text-align:left"&gt; &lt;div style="text-align:left"&gt;
&lt;MultiSelect v-model="columns" :options="columnOptions" optionLabel="header" placeholder="Select Columns" style="width: 20em"/&gt; &lt;MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" placeholder="Select Columns" style="width: 20em"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt; &lt;Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
&lt;/TreeTable&gt; &lt;/TreeTable&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
@ -44,9 +44,9 @@ import NodeService from '../../service/NodeService';
export default { export default {
data() { data() {
return { return {
selectedColumns: null,
columns: null,
nodes: null, nodes: null,
columnOptions: null,
columns: null
} }
}, },
nodeService: null, nodeService: null,
@ -58,10 +58,15 @@ export default {
{field: 'type', header: 'Type'} {field: 'type', header: 'Type'}
]; ];
this.columnOptions = [...this.columns]; this.selectedColumns = this.columns;
}, },
mounted() { mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data); this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
methods: {
onToggle(value) {
this.selectedColumns = this.columns.filter(col => value.includes(col));
}
} }
} }
</CodeHighlight> </CodeHighlight>
@ -78,9 +83,9 @@ import NodeService from '../../service/NodeService';
export default { export default {
data() { data() {
return { return {
selectedColumns: null,
columns: null,
nodes: null, nodes: null,
columnOptions: null,
columns: null
} }
}, },
nodeService: null, nodeService: null,
@ -92,10 +97,15 @@ export default {
{field: 'type', header: 'Type'} {field: 'type', header: 'Type'}
]; ];
this.columnOptions = [...this.columns]; this.selectedColumns = this.columns;
}, },
mounted() { mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data); this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
methods: {
onToggle(value) {
this.selectedColumns = this.columns.filter(col => value.includes(col));
}
} }
} }
</script> </script>