<el-submenuv-if="menuData.children && menuData.children.length > 0" :index="menuData.menuId"> <templateslot="title"> {{ menuData.menuDesc }} </template> <MenuItemv-for="item in menuData.children" :key="item.menuId" :menu-data="item" /> </el-submenu> <el-menu-itemv-else :...
el-aside:构建左侧菜单。 el-menu:左侧菜单内容,常用属性:default-openeds:默认展开的菜单,通过菜单的index值来关联。:default-active:默认选中的菜单,通过菜单的index值来关联。 el-submenu:可展开的菜单,常用属性:index:菜单的下标,文本类型,不能是数值类型。 template:对应el-submenu的菜单名。 i:设置菜单图标,...
el-submenu:表示导航菜单的子盒子选项。 el-menu-item:表示导航菜单的每一项。 其中submenu和munuitem都是用于属性index。 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="...
在<el-menu>中需要--:default-active="this.$route.path"。用来绑定路由表 在<el-menu>中需要--router---或者router=true 在<el-submenu>中的index不可缺少,为必须值,不过此处的index仅为索引,用来让当前元素下的子菜单收缩或释放。每一个submenu的index值只要不一样便可 在<el-menu-item>中,index的值不...
</el-main> </el-container> </el-container> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 说明:el-container标签是整个布局容器,el-header标签是容器上方(含“管理系统”的上方部分),el-aside标签是旁边的菜单列表,el-main标签是右边白色区域(后面会设置它显示后端传过来的数据)。
分为两种情况 情况一:有子集的情况: --> <el-submenu :key="index" :index="item.path" v-if="item.children.length > 0" > <template slot="title"> {{ item.name }} </template> <myitem :data="item.children"></myitem> </el-submenu> <!-- 情况二:没子集的情况: --> <el-menu-...
el-main:页面主视图 icons的使用 在element-ui 中,图标是用class就可以搞定的。 比如一个编辑的图标就可以如下表示: 按钮(el-button) 按钮是el-button来表示的 按钮是分类的,每一种类型就对应不同的button。 按钮的类型type可取值:’primary’、’success’、’warning’、’info’、’danger’ ...
通过绑定:index = index0,点击某个子菜单,对应的菜单才会显示文字颜色改变效果。 所有,出现子菜单相互影响的情况时,注意看是不是忘了设置index属性。最好设置每个子菜单的index不同。 这就是el-submenu 标签中index属性的作用。
return h('el-submenu', { props: { index: (item[this.props.id] || '').toString(), popperClass: this.popperClass }, key: key }, [h('template', { slot: 'title' }, this.createTitle(h, item)), this.createNodes(h, item[this.props.children])]) ...
<el-submenu index="1"> <template slot="title"> 导航一 </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item...