vue实现多级菜单效果

本文实例为大家分享了vue实现多级菜单效果的具体代码，供大家参考，具体内容如下

效果图：

效果说明：

点击父菜单，如果有子菜单就在其左侧显示出子菜单

思路：

通过递归的方式。

代码：

子组件 MenuItem

// 子组件代码
<template>
? ? <li>
? ? ? ? <span @click="toggle(model)"> {{ isFolder? "<" + model.menuName : model.menuName ? }}</span>
? ? ? ? <ul v-if="isFolder" v-show="open" style="position: absolute;left: -120px;top: 0px; width:100px; background-color: cadetblue;">
? ? ? ? ? ? <menuItems v-for="(item, index) in model.childTree" :model="item" :key="index"></menuItems>
? ? ? ? </ul>
? ? </li>
</template>
?
<script type="text/javascript">
? ? export default {
? ? ? ? // 组件递归必要条件，name属性,然后在标签就可以通过name直接使用自己
? ? ? ? name: 'menuItems',
? ? ? ? props: ['model',],
? ? ? ? data() {
? ? ? ? ? ? return {
?? ??? ??? ??? ? // 控制子列表的显示隐藏
?? ??? ??? ??? ?open: false
?? ??? ??? ?}
? ? ? ? },
? ? ? ? computed: {
? ? ? ? ? ? // 是否还有子列表需要渲染，作为v-if的判断条件
? ? ? ? ? ? isFolder() {
? ? ? ? ? ? ? ? return this.model.childTree && this.model.childTree.length
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? // 切换列表显示隐藏的方法
? ? ? ? ? ? toggle(mode) {
?? ??? ??? ??? ?
? ? ? ? ? ? ? ? if(this.isFolder) {
? ? ? ? ? ? ? ? ? ? this.open = !this.open
? ? ? ? ? ? ? ? }
?? ?/* ?? ??? ??? ?if(mode.id != undefined && this.open){
?? ??? ??? ??? ??? ?this.open = false;
?? ??? ??? ??? ?} */
? ? ? ? ? ? },
? ? ? ? }
? ? }
</script>
<style scoped>
?? ?ul,li {
?? ??? ?list-style: none;
?? ?}
</style>

父组件调用子组件

<template>
?? ?<!--https://www.jb51.net/css/378895.html-->
?? ?<view>
?? ??? ?<div style="position: absolute;left:400px;">
?? ??? ??? ?<ul>
?? ??? ??? ??? ?<menu-item v-for="(model, index) in list" :model="model" :key="index"></menu-item>
?? ??? ??? ?</ul>
?? ??? ?</div>
?? ?</view>
?? ?
</template>
?
<script>
?? ?import MenuItem from "components/MenuItem.vue"
?? ?export default {
?? ??? ?components:{
?? ??? ??? ?MenuItem
?? ??? ?},
?? ??? ?computed:{
?? ??? ??? ?
?? ??? ?},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?list: [ // 将菜单数据传到菜单组件中就行了
?? ??? ??? ??? ?{
?? ??? ??? ??? ? ? ?"id": "1",
?? ??? ??? ??? ? ? ?"menuName": "菜单1",
?? ??? ??? ??? ? ? ?"childTree": [{
?? ??? ??? ??? ? ? ? ? ?"menuName": "项目进度",
?? ??? ??? ??? ? ? ? ? ?"childTree": [{
?? ??? ??? ??? ? ? ? ? ? ? ?"menuName": "项目一",
?? ??? ??? ??? ? ? ? ? ? ? ?"childTree": [{ "menuName": "详细信息" }]
?? ??? ??? ??? ? ? ? ? ?}]
?? ??? ??? ??? ? ? ?}, {
?? ??? ??? ??? ? ? ? ? ?"menuName": "任务安排"
?? ??? ??? ??? ? ? ?}]
?? ??? ??? ??? ?},?
?? ??? ??? ??? ?{
?? ??? ??? ??? ? ? ?"id": "2",
?? ??? ??? ??? ? ? ?"menuName": "菜单2"
?? ??? ??? ??? ?},?
?? ??? ??? ??? ?{
?? ??? ??? ??? ? ? ?"id": "3",
?? ??? ??? ??? ? ? ?"menuName": "菜单3"
?? ??? ??? ??? ?}]
?? ??? ??? ?};
?? ??? ?},
?? ??? ?methods:{
?? ??? ?}
?? ?}
</script>
?
<style>?? ?
?? ?ul,li{
?? ?list-style: none !important;
? ? ?}
</style>

结语：

效果图中是将子菜单显示在父菜单的左侧，也可以直接通过把下面的样式删除，让子菜单显示子父菜单的右侧

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于vue实现多级菜单效果的详细内容...