菜单联集

<template>

<div>

<h1>联级菜单展示</h1>

<template v-for="(item) in fakeData">

<el-dropdown trigger="hover" :hide-on-click="false" placement="bottom-end">

<!-- <template v-for="(item, index) in fakeData"> -->

<!-- 一级菜单便利 -->

<span class="el-dropdown-link" >

<el-link type="primary" style="margin-left:10px;" :key="item.pid">{{

item.name

}}</el-link>

</span>

<el-dropdown-menu slot="dropdown">

<template v-for="(item2) in item.children">

<!-- 不存在三级菜单的渲染 -->

<el-dropdown-item v-if="!item2.children" :key="item2.pid">

{{ item2.name }}

</el-dropdown-item>

<!-- 存在三级菜单的渲染 -->

<el-dropdown-item v-else :key="item2.pid">

<el-dropdown placement="right-start">

<span class="el-dropdown-link">

{{ item2.name

}}<i class="el-icon-arrow-down el-icon--right"></i>

</span>

<el-dropdown-menu slot="dropdown">

<template v-for="(item3) in item2.children">

<el-dropdown-item :key="item3.pid">{{

item3.name

}}</el-dropdown-item>

</template>

</el-dropdown-menu>

</el-dropdown>

</el-dropdown-item>

</template>

</el-dropdown-menu>

<!-- </template> -->

</el-dropdown>

</template>

<!-- sss -->

</div>

</template>

<script>

export default {

props: [],

components: {},

data() {

return {

fakeData: [

{

name: "一级菜单",

pid: "1",

children: [

{

name: "1-1",

pid: "1-1",

children: [

{

name: "1-1-1",

pid: "1-1-1",

},

],

},

{

name: "1-2",

pid: "1-2",

children: [

{

name: "1-2-1",

pid: "1-2-1",

},

{

name: "1-2-2",

pid: "1-2-2",

},

],

},

],

},

{

name: "二级菜单",

pid: "2",

children: [

{

name: "2-1",

pid: "2-1",

children: [

{

name: "2-1-1",

pid: "2-1-1",

},

],

},

{

name: "2-2",

pid: "2-2",

children: [

{

name: "2-2-1",

pid: "2-2-1",

},

{

name: "2-2-2",

pid: "2-2-2",

},

],

},

],

},

{

name: "三级菜单",

pid: "3",

children: [

{

name: "3-1",

pid: "3-1",

children: [

{

name: "3-1-1",

pid: "3-1-1",

},

],

},

{

name: "3-2",

pid: "3-2",

children: [

{

name: "3-3-1",

pid: "3-3-1",

},

{

name: "3-3-2",

pid: "3-3-2",

},

],

},

],

},

],

rejectDialog: false,

title: "111",

menu: [

{

title: "分类",

url: "",

childer: [

{

title: "分类1",

url: "1111",

},

{

title: "分类2",

url: "2222",

},

{

title: "分类3",

url: "3333",

},

],

},

{

title: "我的",

url: "",

childer: [

{

title: "个人中心",

url: "b1111",

},

{

title: "我的订单",

url: "b2222",

},

{

title: "购物车",

url: "b3333",

},

{

title: "零钱",

url: "b4444",

},

{

title: "账户安全",

url: "b5555",

},

],

},

{

title: "首页",

url: "https://segmentfault.com/",

},

],

};

},

filter: {},

computed: {},

created() {},

mounted() {},

watch: {},

methods: {},

};

</script>

<style lang="less" scoped></style>