元素变换-深度嵌套菜单栏

需要根据界面数据动态设置菜单，层级和栏目不确定。同时，获取到菜单栏后，每个字段需要两次请求接口，分别获取字段数。父节点个数需要前端处理，将所有子节点字段加起来。三个未知：未知领域、未知级别、未知详情页。问题菜单栏的层级列数不定，需要根据后台数据渲染。如何处理？这里需要组件递归。该项目使用元素的el-menu。菜单栏层级中的列数是不确定的，每一列都需要请求不同的接口获取数据，必须渲染到对应的列显示。不确定多级字段如何请求接口。设置了一个变量来为菜单栏赋值。然后递归变量，根据得到的接口数据修改变量参数。以及如何更新具有多个不确定性的多级字段的组件？将ref设置为组件。递归组件的refs被强制依次更新。点击菜单栏可以跳转到不同的详情页。如果字段数未知，详情页也有位置。如何对页面进行处理，让数据可以根据不同的菜单实时显示？与后台确认，字段信息设置为类型，相同类型需要跳转到相同的模板页面。根据携带的数据不同，页面显示不同的数据。router-view使用keep-alive，设置路由信息为key。这样，路由信息的不同页面就会重新激活。然后设置几套页面模板。根据不同的类型跳转到不同的模板进行页面渲染。详情页的信息都在菜单栏上。单击时如何获取这些列信息。可以放在routingmeta上，点击菜单时动态设置meta。当进入详情页时，钩子函数监听并获取这些数据。层级未知，需要将父节点的个数累加到所有子节点的字段中。如何加起来？使用computed，传入你当前节点的数据，递归data当前节点数据。这会计算您下方的所有子节点。//index.vue父组件菜单栏部分<脚本>exportdefault{methods:{//循环菜单栏获取数字loadCount(){letvue=this;if(!vue.keyword){vue.loading;返回;}vue.loading=false;this.totalCount=0;varallNav=JSON.parse(JSON.Stringify(this.allNav));allNav.forEach((元素,索引)=>{deepArray(元素);});//数组递归请求接口获取数functiondeepArray(element){if(element.isShow!==1)return;如果(element.children.length>0){element.count=0;元素。children.forEach((ele,我dx)=>{deepArray(ele);});}else{vue.getCount(element).then((count)=>{//获取字段数后更新组件，数量element.count=count;vue.totalCount+=count;vue.allNav=allNav;vue.$refs.deepMenu.reload();});}}},//请求url获取数("post","/search/"+ele.countUrl+"/count",{keyword:this.keyword,}).then((res)=>{if(res&&res["intCode"]&&res["intCode"]=="200"){returnresolve(Number(res["data"].total)||0);}else{this.$message.error((res&&res["message"])||"数据获取失败！");}});});},},};//deep-menu.vue<--@Date:2021-08-2709:04:10*@LastEditTime:2021-08-2715:12:29@Description:智能搜索菜单栏深度插件-->