nuxt之极简多极折叠菜单显示，自己拿代码改的，先将就用着

发布日期： 2024-06-07 14:45 阅读量： 84 来源： 互联网

<div>

<ul>

<div @click="item.isExpanded = !item.isExpanded">{{ item.label }}</div>

<ul>

<div @click="item1.isExpanded = !item1.isExpanded">{{ item1.label }}</div>

<ul>

<div @click="item2.isExpanded = !item2.isExpanded">{{ item2.label }}</div>

</li>

</ul>

</template>

</li>

</ul>

</template>

</li>

</ul>

</div>

</template>

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>

上一篇：: 今日正式开搞前端，node,nuxt,纪念一下无处不在的坑,附安装yarn

下一篇：: npm妖蛾子多，npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolve 报错，版本冲突，最全解决步骤(#^.^#)

nuxt之极简多极折叠菜单显示，自己拿代码改的，先将就用着

随便看看