树形视图 Example: https://vuefe.cn/v2/examples/tree-view.html
参照前辈方法实现的，觉得不错，记录一下：
父组件：
<!-- 菜单树 -->
<ul class="T_down" v-for="(menuItem,index) in customerArray" :key="index">
<tree-menu :treeData="menuItem"></tree-menu>
</ul> import treeMenu from './treeMenu.vue' myMailTree: [
{
id: ,
label: '发件箱',
children: []
},
{
id: ,
label: '收件箱',
children: [
{
id: ,
label: '常用邮件',
},
{
id: ,
label: '常用邮件',
children: [
{
id: ,
label: '常用邮件',
children: [
{
id: ,
label: '常用邮件',
},
{
id: ,
label: '常用邮件',
children: [
{
id: ,
label: '常用邮件',
},
{
id: ,
label: '常用邮件',
children: [
{
id: ,
label: '常用邮件',
},
{
id: ,
label: '常用邮件',
},
]
},
]
},
]
},
{
id: ,
label: '常用邮件',
},
]
},
]
},
{
id: ,
label: '草稿箱',
},
], components: {
'tree-menu': treeMenu
},
子组件：
<template>
<li>
<h3>
<i v-if="isFolder" @click="toggle" class="iconfont" :class="[open ? 'icon-arrow-down': 'icon-arrow-right']"></i>
<span class="label">{{treeData.label}}
<em>()</em>
</span>
<span class="T_set">
<i class="iconfont icon-subordinate"></i>
<i class="iconfont icon-subordinate"></i>
<i class="iconfont icon-subordinate"></i>
</span>
</h3>
<ul class="T_down" v-show="open" v-if="isFolder">
<tree-menu v-for="item in treeData.children" :key="item.id" :treeData="item"></tree-menu>
</ul>
</li>
</template> <script>
export default {
name: 'treeMenu',
props: ['treeData'],
data() {
return {
open: false
}
},
computed: {
isFolder() {
return this.treeData.children && this.treeData.children.length
}
},
methods: {
toggle: function() {
if (this.isFolder) {
this.open = !this.open
}
}
}
}
</script>
less
ul.T_down {
//菜单树
// border: 1px solid red;
background-color: #fff;
padding-left: 17px;
line-height: 35px;
li {
>h3 {
// border: 1px solid red;
font-weight: normal;
font-size: 14px;
padding-left: 23px;
cursor: default;
position: relative;
>i.iconfont {
display: block;
width: 23px;
height: %;
text-align: center;
font-size: 12px;
position: absolute;
left: ;
top: ;
&:hover {
color: #008cee;
cursor: pointer;
}
}
>span.label {
color: #;
>em {
font-size: 12px;
font-style: normal;
color: #;
}
}
&:hover {
background-color: #ddd;
span.T_set {
display: block;
}
}
span.T_set {
float: right;
margin-right: 10px;
display: none;
i.iconfont {
display: inline-block;
padding: 2px;
font-size: 13px;
&:hover {
color: #008cee;
cursor: pointer;
}
}
}
}
}
}
参考链接：
https://www.cnblogs.com/caihg/p/6208105.html
.