技术相关
联系我们
nuxt之极简多极折叠菜单显示，自己拿代码改的，先将就用着
<template>
<div>
<ul>
<li v-for="(item, index) in menuItems" :key="index">
<div @click="item.isExpanded = !item.isExpanded">{{ item.label }}</div>
<template v-if="item.isExpanded && item.children">
<!-- <recursive-menu :items="item.children" /> -->
<ul>
<li v-for="(item1, index1) in item.children" :key="index">
<div @click="item1.isExpanded = !item1.isExpanded">{{ item1.label }}</div>
<template v-if="item1.isExpanded && item1.children">
<ul>
<li v-for="(item2, index2) in item1.children" :key="index">
<div @click="item2.isExpanded = !item2.isExpanded">{{ item2.label }}</div>
</li>
</ul>
</template>
</li>
</ul>
</template>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'RecursiveMenu',
props: ['items'],
components: {
// RecursiveMenu: () => import('./RecursiveMenu') // 递归引用自身
},
data() {
return {
menuItems: [{
label: 'Item 1-------------------',
isExpanded: false,
children: [{
label: 'Sub-item 1.1---',
isExpanded: false,
children: [{
label: 'Sub-item 1.1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1.1',
isExpanded: false
},
// ... 更多子项
]
},
{
label: 'Sub-item 1.1---',
isExpanded: false
},
{
label: 'Sub-item 1.1---',
isExpanded: false
},
{
label: 'Sub-item 1.1---',
isExpanded: false
},
{
label: 'Sub-item 1.1---',
isExpanded: false
},
{
label: 'Sub-item 1.1---',
isExpanded: false
},
{
label: 'Sub-item 1.1---',
isExpanded: false
},
{
label: 'Sub-item 1.1---',
isExpanded: false
},
{
label: 'Sub-item 1.1---',
isExpanded: false
},
// ... 更多子项
]
},
{
label: 'Item 2------------------------',
isExpanded: false,
children: [{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
// ... 更多子项
]
},
{
label: 'Item 3--------------------',
isExpanded: false,
children: [{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
{
label: 'Sub-item 1.1',
isExpanded: false
},
// ... 更多子项
]
},
// ... 更多项
]
}
}
}
</script>
