vue循环获取动态表单数据,vue动态生成页面
这篇文章主要介绍了某视频剪辑软件如何从后台获取数据生成动态菜单列表，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
1.数据准备2.选择组件3.配置路由4.不出问题这样就可以实现动态路由了5.完整代码
1.数据准备
树形菜单基本数据很简单，只需要菜单id，菜单名称，路由地址，图标。下图中的节点编号和父节点编号是为了后端生成树形数据，只负责前端的话只需要拿到前面说的四个数据就行。
后端将数据转成树形结构，传给前端的数据结构如图
2.选择组件
我直接用元素-用户界面的埃尔菜单组件，结构是（这是用来注释的，完整代码在后面)
埃尔菜单
选单列中的模板v-for=(item，key)-前端得到的数据存放到选单列数组
El-子菜单：key= key v-if= item。儿童项目。孩子。长度！==0 :index=item.m_url -父级菜单，判断有子节点，索引是路由跳转
模板槽=标题-插槽
i :class=item.m_icon/i -图标
span{{ item.m_name }}/span -菜单名称
/模板
el-menu-item v-for=(val，index)in item。 children :index= val。 m _ URL :key= index -二级菜单
模板槽=标题
i :class=val.m_icon/i
span{{ val.m_name }}/span
/模板
/El-菜单项
/El-子菜单
埃尔-子菜单v-else:key= item。 m _ n _ id :index= item。 m _ URL 没有子节点
模板槽=标题
i :class=item.m_icon/i
span{{ item.m_name }}/span
/模板
/El-子菜单
/模板
/el-menu
3.配置路由
跳转到那个页面是由写在路由器目录下的索引。射流研究…的成分指定的
从“vue”导入某视频剪辑软件
从“vue路由器"导入路由器
Vue.use(路由器)
导出默认新路由器({
//模式：历史，
路线：[
{
路径："/",
姓名：家，
元：{
键："1"
},
组件：()=import(@/views/home )，
孩子：[{
路径："/courseApplication "，//这个路径必须与后端传回数据的m_url字段相对应
名称：课程申请，
元：{
关键："1-1"
},
component:()=import( @/views/train manager/course application )//要跳转的页面路径
}]
}
]
})
4.不出问题这样就可以实现动态路由了
5.完整代码
menu.vue
模板
div class=菜单
埃尔菜单
El-菜单-垂直-演示
@open=handleOpen
@close=handleClose
背景色=rgb(255，255，255)
text-color=rgb(28，41，89)
路由器=路由器
active-text-color=rgb(28，41，89)
选单列中的模板v-for=(item，key)
El-子菜单：key= key v-if= item。儿童项目。孩子。长度！==0 :index=item.m_url
模板槽=标题
i :class=item.m_icon/i
span{{ item.m_name }}/span
/模板
el-menu-item v-for=(val，index)in item。 children :index= val。 m _ URL :key= index
模板槽=标题
i :class=val.m_icon/i
span{{ val.m_name }}/span
/模板
/El-菜单项
/El-子菜单
埃尔-子菜单v-else:key= item。 m _ n _ id :index= item。 m _ URL
模板槽=标题
i :class=item.m_icon/i
span{{ item.m_name }}/span
/模板
/El-子菜单
/模板
/el-menu
/div
/模板
脚本
从" vuex "导入{地图操作}；
导出默认值{
名称： asideItem ，
data(){
返回{
路由器：没错，
isCollapse:没错，
标签:假，
菜单列表：[]
}
},
已安装(){
this.getMenu()
},
方法：{
.地图操作([
获取菜单列表
]),
handleOpen(key，keyPath) {
console.log(key，key path)；
},
handleClose(key，keyPath) {
console.log(key，key path)；
},
标签更改：函数(){
控制台。日志(这个。标签)；
},
getMenu: function() { //从后台获取菜单列表
this.getMenuList().然后(res={
if(res.errno===0) {
this.menuList=res.data
}否则{
这个message.error(res.data)
}
}).接住(错误={这个.$message.error(error) })
}
}
};
/脚本
style lang=postcss 范围。菜单{
过渡：宽度0.28秒缓出；
宽度：180像素
背景：rgb(255，255，255)；
高度：calc(100 VH-46px)；埃尔-菜单{
宽度：100%;
右边界：无；
}
：悬停{
}
}
/风格
风格。埃尔-菜单项：悬停{
大纲：0!重要；
背景色：rgb(232，240，255)！重要；
}。埃尔-菜单项。处于活动状态{
背景：rgb(210，226，255)！重要；
}。埃尔-子菜单_ _标题：焦点，埃尔-子菜单_ _标题：悬停{
大纲：0!重要；
背景：无！重要；
}
/风格
路由器下的索引。射流研究…根据具体数据进行配置
从“vue”导入某视频剪辑软件
从“vue路由器"导入路由器
Vue.use(路由器)
导出默认新路由器({
//模式：历史，
路线：[
{
路径："/",
姓名：家，
元：{
键："1"
},
组件：()=import(@/views/home )，
孩子：[{
路径："/courseApplication "，//这个路径必须与后端传回数据的m_url字段相对应
名称：课程申请，
元：{
关键："1-1"
},
component:()=import( @/views/train manager/course application )//要跳转的页面路径
}]
}
]
})
-----------------------这是分割线（以下是修改前的）-----------------------
将目录作为子目录添加到首页下面，可以显示出来，但是第二次点击同一个菜单时，会出现
地址叠加的情况，导致页面不能显示。而且先点击到别的页面也会出现这种情况
解决办法：在获取动态列表的时候，数据里面有全球资源定位器(统一资源定位器)和来源，不要去获取来源，内层外层循环都获取url，然后在路由器/索引里面，路径改为跟获取的全球资源定位器(统一资源定位器)一样的内容
这个小路主要是为了匹配菜单，最终调取页面是由成分完成的。
刚开始的时候还有一个问题：
就是点击菜单栏的某一项，会全屏显示某一个页面，而不是懒加载的方式，只显示在中间部分，解决办法是将获取的路由放在跟路由下面，作为子组件呈现出来
完整代码
埃尔菜单
：默认-活动=这个.$route.path
El-菜单-垂直
路由器
:collapse=iscollapse
:collapse-transition=false
:active-text-color=变量。菜单活动文本
:background-color=变量。menubg
:text-color=variables.menuText
碎片
模板菜单主义者中的项目
片段v-if=item！=null :key=item.url
El-子菜单v-if= item。childmenuinfotreeset项。childmenuinfotreeset。长度“0”:key=“item。 URL :index= item。网址。tostring()
模板槽=标题
I:class= item .图标cls。tostring() class= iconSize /
span slot= title"{ item。菜单名称} }/span
/模板
El-菜单项v-for= val in item。 childmenuinfotreeset :key= val。 title :index= val。网址。tostring()
我：瓦尔。图标cls。tostring() class= iconSize /
span slot= title"{ val。菜单名称} }/span
/El-菜单项
/El-子菜单
El-菜单项v-else:key= item。 URL :index= item。网址。tostring()
I:class= item .icon cls class= iconSize /
span slot= title"{ item。菜单名称} }/span
/El-菜单项
/片段
/模板
/片段
/el-menu
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。