|
VUE中动态赋值 el-menu,多个el-submenu,详细说明
在Vue中动态赋值 `el-menu` 和多个 `el-submenu` 可以通过遍历数据来实现。以下是一个示例代码,演示如何动态渲染 `el-menu` 和多个 `el-submenu` ,并进行中文输出:
- vue
- <template>
- <div>
- <el-menu :default-active="activeMenu" class="el-menu-vertical-demo">
- <el-submenu v-for="submenu in submenus" :key="submenu.id" :index="submenu.id" :title="submenu.name">
- <el-menu-item v-for="item in submenu.items" :key="item.id" :index="item.id">{{ item.name }}</el-menu-item>
- </el-submenu>
- </el-menu>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- activeMenu: '1', // 默认选中的菜单项
- submenus: [ // 子菜单数据
- {
- id: '1',
- name: '子菜单1',
- items: [
- { id: '1-1', name: '子菜单1-项1' },
- { id: '1-2', name: '子菜单1-项2' }
- ]
- },
- {
- id: '2',
- name: '子菜单2',
- items: [
- { id: '2-1', name: '子菜单2-项1' },
- { id: '2-2', name: '子菜单2-项2' }
- ]
- }
- ]
- };
- }
- }
- </script>
复制代码
在上面的示例中, `el-menu` 动态渲染了两个 `el-submenu` ,每个 `el-submenu` 下又动态渲染了多个 `el-menu-item` 。您可以根据需要调整数据结构和内容,以适应您的实际需求。
|
|