如何找到一家提供专业英文网站制作服务的公司以招聘人才?
摘要:公司做英文网站,专业网站制作公司招聘,苏州华亭建设工程有限公司网站,简述网站主要流程对于element中提供给我们的el-menu组件最多可以实现三层嵌套,如果多一层数据只能自己通过变量去加一层&
公司做英文网站,专业网站制作公司招聘,苏州华亭建设工程有限公司网站,简述网站主要流程对于element中提供给我们的el-menu组件最多可以实现三层嵌套#xff0c;如果多一层数据只能自己通过变量去加一层#xff0c;如果加了两层、三层这种往往是行不通的#xff0c;所以只能进行封装 效果图 一、定义数据
MenuData.ts
export default [{id: 1,name…对于element中提供给我们的el-menu组件最多可以实现三层嵌套如果多一层数据只能自己通过变量去加一层如果加了两层、三层这种往往是行不通的所以只能进行封装 效果图 一、定义数据
MenuData.ts
export default [{id: 1,name: 第一级菜单,level: 1,child: [{id: 11,name: 第二级菜单,level: 1-1,child: [{id: 111,name: 第三级菜单,level: 1-1-1,child: [{id: 1111,name: 第四级菜单,level: 1-1-1-1,child: [{id: 11111,name: 第五级菜单,level: 1-1-1-1-1,child: []}]}]}]}]},{id: 2,name: 第一级同级菜单,level: 2,child: []}]二、封装组件
封装思想 1.对本身组件进行循环使用如果有子集使用本身组件 把child数据传给自己 2.如果没有子集 使用 el-menu-item
以下代码对setup( )函数和setup语法糖分别做了实现
setup语法糖
templateel-menu:default-activedefaultActive:unique-openedtrueclassel-menu-vertical-demotemplate v-foritem in menu!-- 如果有子集 --template v-ifitem.child item.child.length 0el-sub-menu:keyitem.id:indexitem.level:disableditem.meta?.disabled:popper-append-to-bodyfalsetemplate #titlei :class[item.meta?.icon]/i!-- 添加空格 表示下级--span {{ generateSpaces(item.level) }} /spanspan slottitle {{ item.name }}/span/templateMenuTree:menuitem.child:defaultActivedefaultActiveclickItemclickItemHandle//el-sub-menu/template!-- 如果没有子集 --template v-elseel-menu-item:keyitem.id:indexitem.level:disableditem.meta?.disabled:popper-append-to-bodyfalseclickclickItemHandle(item)i :class[item.meta?.icon]/i!-- 添加空格 表示下级--span {{ generateSpaces(item.level) }} /spanspan slottitle{{ item.name }}/span/el-menu-item/template/template/el-menu
/templatescript langts nameMenuTree setup
// 把下面代码变成setup语法糖的形式
import type { PropType } from vue;
import type { MenuItem } from /types/lesson;
// type 为了方便写成这样 可以根据自己项目设定typedefineProps({menu: {type: Array as unknown as PropTypeany[],required: true,default: () [],},defaultActive: {type: String as unknown as PropTypestring,required: true,default: [],},
});const emit defineEmits([update-active-path, clickItem]);// 返回的空格字符串 用于显示菜单层级
const generateSpaces (level: string) {let str
