vue v html el menu,vue下element如果实现菜单el-menu多级循环

1、首先整理下逻辑！

循环，如果有下级，则输出下拉样式，如果没有，则直接输出el-menu-item，v-for

|-- v-if

|-- v-for

|-- v-if

|-- v-for

|-- v-if

输出下拉菜单样式

|-- v-else

|-- v-else

|-- v-else

2、然后我们来组织代码

这是一份模板的输出！ 

0">

0">

直接结束，如果你还有，则继续增加

3、插入模板内容

这个可以直接参考element的导航菜单模块，这里简单说下

 {{item.typename}}

{{item.typename}}

{{item.typename}}

那我们来输入完整的代码！

那我们只需要把！v-else里面全部替换成非下拉菜单！

然后每次v-if输出一个el-submenu 和一个菜单标题，全部代码如下：

0">

 {{item.typename}}

0">

 {{item.typename}}

{{item.typename}}

{{item.typename}}

{{item.typename}}

4、组件化

为方便后续增加修改，我们把这个弄成组件传参！

0">

:key="item.id">

 {{item.typename}}

0">

:key="item.id">

 {{item.typename}}

{{item.typename}}

{{item.typename}}

{{item.typename}}

export default {

data () {

return {

data: []

}

},

props: {

contents: Array

},

mounted () {

this.data = this.contents

console.log(this.data)

}

}

然后父组件调用import elmenu from '../elmenu.vue'

export default {

components: {

elmenu

},

}