使用element-plusel-menu组件实现菜单,主要包括三个组件: el-menu:整个菜单; el-sub-menu:含有子菜单的菜单项; el-sub-menu:没有子菜单的菜单项(最末级); 结合菜单的属性和展示效果,可以得到每个菜单项包括:菜单名称、菜单图标、菜单唯一标识、子菜单列表四个属性。于是可得到菜单项结构定义如下: /** * 菜单...
基于vue3+elementPlus+el-table-infinite-scroll二次封装el-table无限滚动加载 一、安装el-table-infinite-scroll 安装el-table-infinite-scroll 2、组件封装 template setup (~▽~)~* 转载请说名出处,谢谢,尊重劳动成果。如果对你开发过程有帮助请帮忙点个小赞 (~▽~)~* 畅享全文阅读体验 扫码后在手机中选择通...
-- 添加空格 表示下级--><span>{{ generateSpaces(item.level) }}</span><spanslot="title">{{ item.name }}</span></el-menu-item></template></template></el-menu></template><scriptlang="ts"name="MenuTree"setup>// 把下面代码变成setup语法糖的形式importtype {PropType}from"vue";importtyp...
使用element-plusel-menu组件实现菜单,主要包括三个组件: el-menu:整个菜单;el-sub-menu:含有子菜单的菜单项;el-sub-menu:没有子菜单的菜单项(最末级); 结合菜单的属性和展示效果,可以得到每个菜单项包括:菜单名称、菜单图标、菜单唯一标识、子菜单列表四个属性。于是可得到菜单项结构定义如下: /** * 菜单项 ...
3.1 封装菜单项的渲染 3.2 封装菜单组件 4 测试组件 4.1 菜单测试数据 4.2 测试页面 4.3 运行效果 总结: 本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus el-menu 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。
name: "第一级同级菜单", level:'2', child: [] } ] 二、封装组件 封装思想: 1.对本身组件进行循环使用,如果有子集使用本身组件 把child数据传给自己 2.如果没有子集 使用el-menu-item 以下代码对setup( )函数和setup语法糖分别做了实现 setup语法糖 ...
1.1 菜单项数据结构 使用element-plusel-menu组件实现菜单,主要包括三个组件: el-menu:整个菜单; el-sub-menu:含有子菜单的菜单项; el-sub-menu:没有子菜单的菜单项(最末级); 结合菜单的属性和展示效果,可以得到每个菜单项包括:菜单名称、菜单图标、菜单唯一标识、子菜单列表四个属性。于是可得到菜单项结构定义...
1.对本身组件进行循环使用,如果有子集使用本身组件 把child数据传给自己 2.如果没有子集 使用 el-menu-item 以下代码对setup( )函数和setup语法糖分别做了实现 setup语法糖 <template> <el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo" > <template v-for="it...