antdesignVue递归导航菜单

手写版本

文件leftNav.vue

<template>
<!--       <a-switch:checked="theme === 'dark'"checked-children="Dark"un-checked-children="Light"@change="changeTheme"/> --><a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline":theme="theme"@click="handleClick"><template v-for="item in menuList"><a-sub-menu :key="item.id" @titleClick="titleClick" v-if="item.children"><template #icon><component :is="$antIcons[item.icon]" /></template><template #title>{{item.name + item.id}}</template><template :key="sitem.id" v-for="sitem in item.children"><a-menu-item v-if="!sitem.children">{{sitem.name}}</a-menu-item><!-- <a-menu-item v-else="!sitem.children">{{[sitem]}}</a-menu-item> --><leftNav :menuList="[sitem]" v-else /></template></a-sub-menu><a-menu-item :key="item.id" v-else><template #icon><component :is="$antIcons[item.icon]" /></template>{{item.name +item.id}}</a-menu-item></template></a-menu>
</template>
<script>import { defineComponent, reactive, toRefs } from 'vue';export default {components: {},setup() {const state = reactive({theme: 'dark',selectedKeys: ['1'],// openKeys: ['sub1'],});const changeTheme = checked => {state.theme = checked ? 'dark' : 'light';};return { ...toRefs(state),changeTheme,};},props:['menuList','ids'],// props: {//     menuList: {//       type: Object,//     },// },methods: {changNav(item) {console.log(item.key)this.$router.push({path: item.key})this.selectedKeys = item.key},updateMenu() {const routes = this.$route.matched.concat()this.selectedKeys = [routes.pop().path]}},mounted() {},created() {},computed: {// 计算属性的 getterchildrenData: function() {// `this` 指向 vm 实例return '['+this.childrenObject+']'}}}
</script>
<style>.ant-menu-inline{height: 100%;}
</style>

官方版本

<template><div style="width: 256px"><a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed"><MenuUnfoldOutlined v-if="collapsed" /><MenuFoldOutlined v-else /></a-button><a-menuv-model:openKeys="openKeys"v-model:selectedKeys="selectedKeys"mode="inline"theme="dark":inline-collapsed="collapsed"><template v-for="item in list" :key="item.key"><template v-if="!item.children"><a-menu-item :key="item.key"><template #icon><PieChartOutlined /></template>{{ item.title }}</a-menu-item></template><template v-else><sub-menu :key="item.key" :menu-info="item" /></template></template></a-menu></div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import { MenuFoldOutlined, MenuUnfoldOutlined, PieChartOutlined, MailOutlined } from '@ant-design/icons-vue'; // you can rewrite it to a single file component, if not, you should config vue alias to vue/dist/vue.esm-bundler.jsconst SubMenu = {name: 'SubMenu',props: {menuInfo: {type: Object,default: () => ({}),},},template: `<a-sub-menu :key="menuInfo.key"><template #icon><MailOutlined /></template><template #title>{{ menuInfo.title }}</template><template v-for="item in menuInfo.children" :key="item.key"><template v-if="!item.children"><a-menu-item :key="item.key"><template #icon><PieChartOutlined /></template>{{ item.title }}</a-menu-item></template><template v-else><sub-menu :menu-info="item" :key="item.key" /></template></template></a-sub-menu>`,components: {PieChartOutlined,MailOutlined,},
};
const list = [{key: '1',title: 'Option 1',
}, {key: '2',title: 'Navigation 2',children: [{key: '2.1',title: 'Navigation 3',children: [{key: '2.1.1',title: 'Option 2.1.1',}],}],
}];
export default defineComponent({components: {'sub-menu': SubMenu,MenuFoldOutlined,MenuUnfoldOutlined,PieChartOutlined,},setup() {const collapsed = ref(false);const toggleCollapsed = () => {collapsed.value = !collapsed.value;};return {list,collapsed,toggleCollapsed,selectedKeys: ref(['1']),openKeys: ref(['2']),};},});
</script>

antdesignVue递归导航菜单相关推荐

ant-design-vue导航菜单a-menu的详细使用
ant-design-vue导航菜单a-menu的详细使用一.效果一.关键的API 二.注意事项三.代码此文章包含了递归生成三级菜单,刷新状态保留,只展开一个父级菜单等常见问题. 一.效果可 ...
vue、Menu 导航菜单、Menu属性事件、vue Menu 全部导航菜单、vue Menu 全部属性事件
vue.Menu 导航菜单.Menu属性事件.vue Menu 全部导航菜单.vue Menu 全部属性事件设计规则何时使用代码演示顶部导航内嵌菜单缩起内嵌菜单只展开当前父级菜单垂直菜 ...
来自数据库的MVC 6动态导航菜单
目录目标介绍使用的组件创建Web项目迁移数据服务导航菜单接下来是什么结论 Download source code - 977.3 KB 目标几年前,我不得不从数据库加载导航菜单并 ...
vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）
目录系列文章一.先说点什么二.从问题开始,侧边栏是干啥的? 三.封装组件之思路分析四.封装菜单部分 1. MenuItem 2. ModuleMenu 系列文章 vue3.0+ts+eleme ...
jQuery 插件开发——Menu（导航菜单）
故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单,这个我相信不管做B/S还是做C/S都非常熟悉一 ...
使用vue-router自动生成导航菜单
当我们选用ElementUI作为页面开发的组件库,并打算创建一个如下的菜单表项: 如果我们采用 ElementUI 库中的 el-menu 组件来实现的话,效果会很不错,但是代码的画风可能是这样的: ...
element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
导航条——收缩式导航菜单
1.概述在网站中不仅可以设置导航条,而且还可以设置导航菜单.由于菜单内容比较多,同一页面显示比较杂乱,所以很多的设计者都采用了收缩式的菜单形式. 2.技术要点本实例主要是应用JavaScript控 ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...

antdesignVue递归导航菜单

手写版本

antdesignVue递归导航菜单相关推荐

最新文章

热门文章