I'm using vue 3 treeview to show the list of buildings, real state etc. now I want to specify an icon for root which is home icon, and the first parent to be building, and the children to be store.
but as I saw treeview only had open & close Icon to handle :( can anyone tell me how to customize it?
<blocks-tree class="justify-content-center d-flex" :data="treeData"
:horizontal="treeOrientation==='1'"
:config="config"
:collapsable="true">
<template #node="{data}">
<span>
<input type="checkbox"
:checked="selected.indexOf(data.some_id)> -1"
#change="(e)=>toggleSelect(data,e.target.checked)"/>
{{data.label}}
</span>
</template>
</blocks-tree>
the data:
let treeData = reactive({
label: '4-4-2-2-0-0-0',
expand: true,
some_id: 1,
icon: 'fa fa-home',
children: [
{ label: '4-4-2-2-1-0-0', some_id: 2, icon: 'fa fa-building', },
{ label: '4-4-2-2-1-0-1', some_id: 3, icon: 'fa fa-building',},
{
label: '4-4-2-2-1-0-2',
some_id: 4,
expand: false,
children: [
{ label: '4-4-2-2-1-1-2', some_id: 5 },
{
label: '4-4-2-2-1-2-2',
some_id: 6,
expand: false,
children: [
{ label: 'واحد 1', some_id: 7 },
{ label: 'واحد 2', some_id: 8 },
]
},
]
},
]
});
and config:
config: {
roots: ['1'],
parentIcon: {
type: 'class',
class: 'fa fa-home'
}
}
Related
I'm using v-treeview and i have items like that:
[
{
id: 1,
name: 'name 1',
disabled: false,
children: [
{
id: 2,
name: 'name 2',
disabled: false,
children: [
{
id: 3,
name: 'name 3',
disabled: false
}
]
},
{
id: 4,
name: 'name 4',
disabled: false,
children: [
{
id: 5,
name: 'name 5',
disabled: true
}
]
},
{
id: 6,
name: 'name 6',
disabled: true,
children: [
{
id: 7,
name: 'name 7',
disabled: true
}
]
}
]
}
]
that i want is, only showing the items with disabled false; without passing by filter data to send to v-treeview;
I already tried on slot on not showing any data when disabled is true but the the item set blank space:
<template v-slot:label="{item}" >
<v-container v-if="!item.disabled">
{{ item.name }}
</v-container>
</template>
Some items is provided with v-select, it allow to switch the disabled value of children items, so can't use filter computed cause i have no access of the children with disabled true;
You can use computed in order to create a dynamic variable:
computed: {
visibleElements: function() {
// filter here only entries you are interested to show
let visibleElements = elements.map(el => {
:
:
});
return visibleElements;
}
}
I am using SideMenuBar from https://www.npmjs.com/package/vue-sidebar-menu to generate a side menu for my app. The elements in the bar should be dynamic based on whether the person is logged-in. The problem I have is that when I login, the items arent reactive - I need to refresh my browser for the menu to refresh. Any idea what I am doing wrong?
<div id="app">
<sidebar-menu :menu="dynamicMenu" #toggle-collapse="onToggleCollapse" #item-click="onItemClick" :collapsed="collapseMenu" >
</sidebar-menu>
<router-view />
computed: {
isAuthorized: function() {
return UserStorageService.GetUser() === null ? false : true;
},
dynamicMenu() {
return [
{
header: true,
title: "Menu",
hiddenOnCollapse: true
},
{
href: { path: "/" },
title: "Home",
icon: "fas fa-home"
},
{
href: { path: "/Dashboard" },
title: "Dashboard",
icon: "fas fa-folder",
hidden: !this.isAuthorized
},
{
href: { path: "/" },
title: "Reporting",
icon: "fas fa-archive",
hidden: !this.isAuthorized
},
{
href: { path: "/" },
title: "My profile",
icon: "fas fa-share-alt",
hidden: !this.isAuthorized
}
]
}
},
When I sign-in, the value of "isAuthorized" should change to true. That value should then be assigned to my dynamic menu (the inverse) and should toggle the menu option hidden/not-hidden.
I have a vuetify treeview that I am trying to use for creating a menu. The treeview works fine however I am unable to add a router-link to Vuetify treeview using template. I have created a codepen here. What am I missing?
template:
<div id="app">
<v-app id="inspire">
<v-treeview open-all dense :items="items">
<template v-slot:prepend="{ item }">
<router-link v-bind:to="`{name:item.to, params:{domain:item.domain}`" >{{item.name}}</router-link>
</template>
</v-treeview>
</v-app>
</div>
script:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{
id: 1,
name: 'Applications :',
to:'applications',
domain:'clearcrimson',
children: [
{ id: 2, name: 'Calendar : app', to:'calendar',
domain:'clearcrimson'},
{ id: 3, name: 'Chrome : app', to:'chrome',
domain:'clearcrimson' },
{ id: 4, name: 'Webstorm : app', to:'webstorm',
domain:'clearcrimson' },
],
},
{
id: 5,
name: 'Documents :',
children: [
{
id: 6,
name: 'vuetify :',
children: [
{
id: 7,
name: 'src :',
children: [
{ id: 8, name: 'index : ts' },
{ id: 9, name: 'bootstrap : ts' },
],
},
],
},
{
id: 10,
name: 'material2 :',
children: [
{
id: 11,
name: 'src :',
children: [
{ id: 12, name: 'v-btn : ts' },
{ id: 13, name: 'v-card : ts' },
{ id: 14, name: 'v-window : ts' },
],
},
],
},
],
},
{
id: 15,
name: 'Downloads :',
children: [
{ id: 16, name: 'October : pdf' },
{ id: 17, name: 'November : pdf' },
{ id: 18, name: 'Tutorial : html' },
],
},
{
id: 19,
name: 'Videos :',
children: [
{
id: 20,
name: 'Tutorials :',
children: [
{ id: 21, name: 'Basic layouts : mp4' },
{ id: 22, name: 'Advanced techniques : mp4' },
{ id: 23, name: 'All about app : dir' },
],
},
{ id: 24, name: 'Intro : mov' },
{ id: 25, name: 'Conference introduction : avi' },
],
},
],
}),
})
I got some problem with Vuetify treeview component. My goal is:
When I select some treeview's element and press expand /collapse button I want to see all children for this element, and then when I press the button once again I want to collapse all selected element.
Here's my code:
<template>
<v-container fluid>
<v-btn justify-center #click="expandCollapse"> Expand or collapse </v-btn>
<v-treeview
class="ml-4"
v-model="tree"
:open="items"
:items="items"
activatable
item-key="name"
>
<template slot="prepend" slot-scope="{ item }">
<v-list-tile-avatar
size="30"
style="min-width: 40px;"
tile
>
<img :src="imageType(item.type)" alt=""/>
</v-list-tile-avatar>
</template>
</v-treeview>
</v-container>
</template>
<script>
export default {
data: () => ({
items: [
{
name: 'Factory A',
type: 'board',
children: [
{
name: 'Line 1',
children: [{
name: 'Machine ABC',
type: 'machine'
}],
type: 'board'
},
{
name: 'Line 2',
children: [{
name: 'Machine ABC 02',
children: [{
name: 'Part A',
type: 'part'
},
{
name: 'Part B',
type: 'part'
},
{
name: 'Part C',
type: 'part'
},
{
name: 'Part D',
type: 'part'
}
],
type: 'machine'
}],
type: 'board'
},
{
name: 'Line 3',
children: [{
name: 'Machine ABC 03',
type: 'machine'
}],
type: 'board'
},
{
name: 'Line 4',
children: [{
name: 'Machine ABC 04',
type: 'machine'
}],
type: 'board'
}
]
}
]
}),
methods: {
imageType (type) {
switch (type) {
case 'board':
return require('#/assets/images/board.svg')
case 'machine':
return require('#/assets/images/machine.svg')
case 'part':
return require('#/assets/images/part.svg')
}
},
// ADDED
bfs: function (tree, key, collection) {
if (!tree[key] || tree[key].length === 0) return
for (var i = 0; i < tree[key].length; i++) {
var child = tree[key][i]
collection.push(child)
this.bfs(child, key, collection)
}
},
expandCollapse (item) {
const childs = []
const selectedIDs = []
childs.push(item)
this.bfs(item, 'children', childs)
}
}
}
</script>
Ok, I got the solution. I just added two if-statements to function.
if (this.open.indexOf(selectedIDs[0]) === -1) {
this.open = this.open.concat(childs.map(node => node.id))
} else {
this.open = this.open.filter((item) => !selectedIDs.includes(item))
}
Use the open and active event listeners to update the open/closed items.
To get the active items use the update:active event.
To get the open items use the update:open event.
on expandCollapse use the active items and the open items to determine whether to open or close, and then update the open to reflect the change. This part is just iterating through the items and running a comparing to active and open
I want to create a vue component that displays a element-ui tree with sloped-slot.
I imported the element-ui via npm install element-ui -S and it's listed in my node_modules folder.
I try to display the tree via the following code but it doesn't work.
<template>
<div>
<h1>Testing Sloped Slot of element-ui tree with vue.js</h1>
<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span><b>{{ node.label }}</b></span>
</span>
</el-tree>
</div>
</template>
<script>
import tree from 'element-ui'
export default {
name: 'chart',
data() {
return data = [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 9,
label: 'Level three 1-1-1'
}, {
id: 10,
label: 'Level three 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
id: 6,
label: 'Level two 2-2'
}]
}];
},
}
Vue.use(tree);
</script>
You have a typo in the data() method.
Vue merges returned from data() object into "this".
So, if you have data() { return {a: '1'}; } - a became available in this.a in components, or just a in templates.
Your data() should looks like:
data() {
return {
data: [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 9,
label: 'Level three 1-1-1'
}, {
id: 10,
label: 'Level three 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
id: 6,
label: 'Level two 2-2'
}]
}]
};
},