element ui 前台模板_element-ui 菜单模板封装（递归）

1.使用vue-cli后src路径找个文件夹创建menu.vue;

注意：

1.数据需要通过父页面传递进来，在模板中会造成数据溢出

模板需要有name属性，调用模板的父页面的组件名称和模板name需一致，才能实现递归。

//menu.vue;

//循环数据；数据menuList通过props传递

//当有子集数据再次使用这个模板，:menuList通过props传递

.el-menu--collapse span,

.el-menu--collapse i.el-submenu__icon-arrow

{

height: 0;

width: 0;

overflow: hidden;

visibility: hidden;

display: inline-block;

}

export default{

name:'Menu',//模板名称

data(){

return {

}

beforeMount(){

props:['menuList']

}

2.父页面使用组件；

//template部分

class="el-menu-vertical-demo"

:collapse="isCollapse"

background-color="rgb(73, 80, 96)" //背景颜色：此备注说明用，实际开发需要删除，否则报错

text-color="rgba(255,255,255,0.7)" //字体颜色：此备注说明用，实际开发需要删除，否则报错

unique-opened //只打开一个菜单：此备注说明用，实际开发需要删除，否则报错

//script部分

import Menu from './main-components/menu.vue'; //引进菜单模板

import {menudata} from '../data/menu.js'; //菜单数据

export default{

data(){

return {

isCollapse:false,//菜单展开功能

unCollapse:{

width:'220px'

collapse:{

width:'50px'

unCollapseMain:{

paddingLeft:'220px'

collapseMain:{

paddingLeft:'50px'

menuList:menudata.obj

}

methods:{

toggleClick(){//菜单展开功能

this.isCollapse=!this.isCollapse;

}

components:{

Menu//使用菜单组件

}

element ui 前台模板_element-ui 菜单模板封装（递归）相关推荐

element ui表格打印_element ui实现前台打印功能
element ui实现前台打印功能简介在项目中经常会使用打印功能,这次我们来看一下element ui实现打印功能,后台采用springboot作为后台接口方法,后台抽数据就不用看了,大家都明白 ...
element table批量删除_element ui 批量删除
//这里做一个事件 checkbox发生改变时触发修改删除 data{ return { multipleSelection: [] //返回的是选中的列的数组集合这里接收用户选中的id 默认放 ...
element tree ui 全选_element UI tree 控件，点击父节点进行异步加载，异步加载的数据不能全选...
异步加载不能有多级数据,异步的只能一级级加载贴上我的代码 html :load="loadNode" node-key='id' lazy ref="tree" ...
element ui 穿梭框_element ui 的穿梭框的右边框在初始化怎么赋值上去
展开全部在表格初始化时,设32313133353236313431303231363533e78988e69d8331333433646465置selectable属性,回掉参数为(row,inde ...
UI设计动效\动画素材模板|分层分步骤学习动效设计
动效意味着充满生命和兴奋,为静态事物增添了生命.然而,在软件方面,动效不仅是为了获得乐趣,而且是为了解决问题. 搜UI SOOUI 带来UI设计动效\动画素材模板,分层分步骤学习动效设计.从可临摹分层 ...
UI素材模板|app ui界面的导航设计都有哪些？
导航的使命就在于自身的"名称"上面,它叫什么名字就是在告诉用户"沿着这条路能通往哪里",所以导航的展示形式虽然多种多样,却大多逃不出文字的辅佐,这是因为它的本质 ...
UI实用素材|扁平化UI设计模板，UI设计师都要会！
在当今信息爆炸的文化背景下,人们每天要通过过手机APP接触巨大的信息流,然后再持续的进行评估.过滤并且再加工,具有认知上的负担,扁平化UI设计更加适合信息碎片化的传递方式. 扁平化的UI设计通过将有效 ...
信捷触摸屏UI模板XINJIE UI信捷触摸屏界面模板
信捷触摸屏UI模板XINJIE UI信捷触摸屏界面模板 id=594740223989&
python 自动化识别H5模板与UI设计是否一致
公司开发根据UI设计制作了2000多个H5网页.利用python 自动化去挑选2000多个模板中错误的模板.经过粗略的查看,发现有些模板显示为空白,或者与原UI设计不一致,根据这个来设计方案.首先考虑 ...
安卓手机应用软件UI界面设计展示PR样机模板MOGRT
9个不同角度展示安卓手机应用软件UI界面设计作品展示PR模板Mogrt|Android安卓样机模板主要特点: 适用于 Premiere Pro CC 2021+ 适用于图像或视频轻松改变颜色轻松 ...

element ui 前台模板_element-ui 菜单模板封装（递归）

element ui 前台模板_element-ui 菜单模板封装（递归）相关推荐

最新文章

热门文章