如何找到一家提供专业英文网站制作服务的公司以招聘人才？

公司做英文网站,专业网站制作公司招聘,苏州华亭建设工程有限公司网站,简述网站主要流程对于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 ;level.split() .filter((it) it ! -) .forEach(() {str 　;});return str; };// 点击当前菜单项 const clickItemHandle (item: MenuItem) {emit(clickItem, item); }; /scriptstyle scoped langless .el-menu {width: 288px; } /stylesetup函数 templateel-menu :default-activedefaultActive :unique-openedtrue classel-menu-vertical-demo template v-foritem in menutemplate 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 :defaultActivedefaultActive clickItemclickItemHandle //el-sub-menu/templatetemplate 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 import { defineComponent, toRefs } from vue; import type { PropType } from vue import type {MenuItem} from /types/lesson export default defineComponent({name: MenuTree,props: {menu: {type: Array as unknown as PropTypeany[],required: true,default: () [],},defaultActive: {type: String as unknown as PropTypestring,required: true,default: ,},},emits: [update-active-path,clickItem],setup(props, context) {const { menu, defaultActive } toRefs(props);const generateSpaces (level:string) {let str level.split().filter(itit!-).forEach(() {str 　})return str}const clickItemHandle (item:MenuItem) {context.emit(clickItem, item)}return {clickItemHandle,menu,defaultActive,generateSpaces,}}, }); /scriptstyle scoped langless.el-menu {width: 288px;} /styletype就不补充了 可根据自己项目定义可临时改成any 三、使用组件 templateMenuTree:menumenuList:defaultActivedefaultActiveclickItemhandleMenuClick:update-clickhandleMenuClick/ /templatescript setup langts import MenuTree from ./components/MenuTree.vue; import type {MenuItem} from /types/lesson import menuData from ./MenuDataconst defaultActive refstring(); // 1-1-1-1 默认选中的数据 const menuList ref(menuData)const handleMenuClick (item:MenuItem) {console.log(父组件,item); }; /script 补充default-active变量如果一开始想默认点开第一层的数据 就需要找规律啦 拿到所有的level通过接口方式返给你 自己平铺拿到所有的level也好  例如数据格式: let arr [ 1-1,1-1-1,1-1-1-1,1-1-1-2,1-1-1-3,1-1-1-4,1-1-1-5,1-1-1-6,1-1-2,1-1-2-1 ] 想要的结果就是 最长且相同数字最多的元素 1-1-1-1 arr.sort((a,b) b.split(-).length - a.split(-).length)[0] 使用split防止有些字符串是10、11 两位数字的