动态生成Menu

项目中需要动态生成菜单,于是写了个简单的c#代码示例,有待进一步完善:

 

            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            dt.Columns.Add("Code");
            dt.Rows.Add("1000");
            dt.Rows.Add("10001000");
            dt.Rows.Add("100010001000");
            dt.Rows.Add("100010001001");
            dt.Rows.Add("10001001");
            dt.Rows.Add("100010011000");
            dt.Rows.Add("100010011001");
            dt.Rows.Add("10001002");
            dt.Rows.Add("100010021000");
            dt.Rows.Add("100010021001");
            ds.Tables.Add(dt);

            for (int i = 1; i < ds.Tables[0].Rows.Count; i++)
            {
                MenuItem mi = new MenuItem(ds.Tables[0].Rows[i][0].ToString(), ds.Tables[0].Rows[i][0].ToString(), "", "");
                for (int j = i+1; j < ds.Tables[0].Rows.Count; j++)
                {
                    if (ds.Tables[0].Rows[i][0].ToString().Length < ds.Tables[0].Rows[j][0].ToString().Length)
                    {
                        MenuItem mi1 = new MenuItem(ds.Tables[0].Rows[j][0].ToString(), ds.Tables[0].Rows[i][0].ToString(), "", "");
                        mi.ChildItems.Add(mi1);
                        if (j==ds.Tables[0].Rows.Count-1)
                        {
                            i = j;
                        }
                    }
                    else
                    {
                        i = j - 1;
                        break;
                    }
                }
                Menu1.Items.Add(mi);
            }

转载于:https://www.cnblogs.com/guoxiaowen/archive/2009/05/06/1451039.html

在 Vue.js 中,使用 `el-menu` 是 Element UI 提供的一个菜单组件。如果你需要动态生成菜单项(比如根据用户权限或从接口获取的菜单数据),你可以通过递归组件或者动态渲染的方式来实现。 下面是一个完整的示例,展示如何使用 Vue + Element UI 动态生成一个嵌套的 `el-menu` 菜单: ### 示例代码 ```vue <template> <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router > <menu-item v-for="item in menuData" :key="item.index" :item="item" /> </el-menu> </template> <script> // 定义一个递归组件用于渲染子菜单和菜单项 const MenuItem = { name: 'MenuItem', props: ['item'], template: ` <div> <!-- 如果有 children 表示是 el-sub-menu --> <el-sub-menu v-if="item.children" :index="item.index"> <template #title> <i :class="item.icon"></i> <span>{{ item.title }}</span> </template> <!-- 递归调用自身渲染子菜单 --> <menu-item v-for="child in item.children" :key="child.index" :item="child" /> </el-sub-menu> <!-- 否则就是 el-menu-item --> <el-menu-item v-else :index="item.index"> <i :class="item.icon"></i> <span>{{ item.title }}</span> </el-menu-item> </div> ` }; export default { components: { MenuItem }, data() { return { // 模拟的菜单数据,可以来自接口 menuData: [ { index: '1', title: '首页', icon: 'el-icon-s-home' }, { index: '2', title: '产品管理', icon: 'el-icon-s-goods', children: [ { index: '2-1', title: '产品列表', icon: 'el-icon-document' }, { index: '2-2', title: '添加产品', icon: 'el-icon-circle-plus-outline' } ] }, { index: '3', title: '用户管理', icon: 'el-icon-user-solid', children: [ { index: '3-1', title: '用户列表', icon: 'el-icon-user' }, { index: '3-2', title: '角色权限', icon: 'el-icon-s-check' } ] } ] }; }, methods: { handleOpen(key, keyPath) { console.log('打开菜单:', key, keyPath); }, handleClose(key, keyPath) { console.log('关闭菜单:', key, keyPath); } } }; </script> <style scoped> .el-menu-vertical-demo:not(.el-menu--horizontal) { width: 200px; } </style> ``` --- ### 代码说明 1. **组件结构**: - 使用了 `el-menu` 作为根菜单容器。 - 使用了一个自定义组件 `MenuItem` 来递归地渲染菜单项。 - 根据是否有 `children` 字段判断是否为子菜单(`el-sub-menu`)。 2. **数据驱动**: - `menuData` 是一个模拟的数据源,实际项目中可以从 API 接口获取。 - 每个菜单项包含 `index`、`title` 和 `icon` 字段,如果有子菜单,则加上 `children`。 3. **路由跳转**: - `el-menu` 设置了 `router` 属性,表示启用 vue-router 模式,点击菜单会跳转到对应 `index` 的路由路径。 4. **递归组件**: - 使用 `MenuItem` 组件递归地处理多级菜单,支持无限层级嵌套。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值