I wrote a tree diagram in vue, but it will be displayed together.
I want to click on the operation to show one how to change it?
<template>
<li class="tree-menu-list">
<a @click="toggle();sendParams()">
<i v-if="isFolder" class="iconfont" :class="[open ? "icon-jiantouarrow487": "icon-iconfontjiantou"]"></i>
<i v-if="!isFolder" class="iconfont"></i>
{{ model.menuName }}
</a>
<ul v-show="open" v-if="isFolder">
<tree-menu v-for="(item, index) in model.children" :model="item" :key="index"></tree-menu>
</ul>
</li>
</template>
<script>
export default {
name: "treeMenu",
props: ["model"],
data () {
return {
open: false,
currentTab: false,
isFolder: this.model.children && this.model.children.length ? true : false
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},
sendParams: function () {
this.$router.push({
path: "/info",
name: "info",
query: {
id: this.model.id,
name: this.model.menuName
}
})
}
}
}
</script>