父组件:treeTest.vue:
<template>
<div>
<div>
<tree-children
v-for="(item, index) in treeData"
:key="index"
:tree="item"
></tree-children>
</div>
</div>
</template>
<script>
import TreeChildren from '~/components/tree/children.vue'
export default {
data () {
return {
isTree: false,
treeData: [{
title: "一级菜单",
test:1,
children: [{
title: "二级菜单",
test:2,
children: [{
title: "三级菜单",
test:3,
children: [{
title: "四级菜单",
test:4
}]
}]
}]
}]
}
},
components: {
TreeChildren
},
methods: {
/**
* 生成树形数据
*/
onTree (data, pid = 0) {
let result = []
let temp = []
for (const i in data) {
if (data[i].pid === pid) {
result.push(data[i])
const temp = this.onTree(data, data[i].id)
if (temp.length > 0) {
data[i].children = temp
}
}
}
return result
}
}
}
</script>
<style>
.tree {
width: 300px
}
li {
padding-left: 30px
}
</style>
子组件：children.vue：
<template>
<div>
<span class="isadd" @click="isAdd = !isAdd">
<span v-if="isAdd">+</span>
<span v-if="!isAdd">-</span>
</span>
<span class="title" @click="onNode(tree)">{{tree.title}}</span>
<tree-children
v-if="tree.children && isAdd"
v-for="(item, index) of tree.children"
:key="index"
:tree="item"
:class="item.test===2?'test2':'test3'"
></tree-children>
</div>
</template>
<style>
.test2 {
padding-left: 15px
}
.isadd {
height: 14px;
width: 14px;
cursor: pointer;
background: gray;
margin-right: 10px;
}
.title {
color: blueviolet;
cursor: pointer;
}
.title:hover {
color: darkgoldenrod
}
.test3 {
padding-left: 15px
}
</style>
<script>
import TreeChildren from '~/components/tree/children'
export default{
name: "treeChildren",
props: ['tree'],
components: {
TreeChildren
},
data () {
return {
isAdd: true
}
},
methods: {
/**
* 选着节点
*/
onNode (item) {
this.isAdd = !this.isAdd
console.log('onNode', item)
}
}
}
</script>
效果图：