重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关vue.js中怎么利用element-ui实现一个菜单树形结构,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
前锋网站建设公司创新互联公司,前锋网站设计制作,有大型网站制作公司丰富经验。已为前锋1000+提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的前锋做网站的公司定做!
后台返回的数据格式是这个样子的:
data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID:'m1', name:'目录一--菜单一', menuID:'m11', isContent:true }, { pID:'m1', name:'目录一--目录一', menuID:'m12', isContent:false }, { pID:'m12', name:'目录一--目录一--菜单一', menuID:'m121', isContent:true }, { pID:'m2', name:'目录二--菜单一', menuID:'m21', isContent:true }, { pID:'m2', name:'目录二--菜单二', menuID:'m22', isContent:true }, ]
这是一串具有父子关系的数据,首先就是要把这一大串数据转化成树形结构:
tree(){ let data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID:'m1', name:'目录一--菜单一', menuID:'m11', isContent:true }, { pID:'m1', name:'目录一--目录一', menuID:'m12', isContent:false }, { pID:'m12', name:'目录一--目录一--菜单一', menuID:'m121', isContent:true }, { pID:'m2', name:'目录二--菜单一', menuID:'m21', isContent:true }, { pID:'m2', name:'目录二--菜单二', menuID:'m22', isContent:true }, ] let tree = [] for(let i=0;i运行完后返回的结构就是这个样子:
[{"pID":"1","name":"目录一","menuID":"m1","isContent":false,"list":[{"pID":"m1","name":"目录一--菜单一","menuID":"m11","isContent":true,"list":[]},{"pID":"m1","name":"目录一--目录一","menuID":"m12","isContent":false,"list":[{"pID":"m12","name":"目录一--目录一--菜单一","menuID":"m121","isContent":true,"list":[]}]}]},{"pID":"1","name":"目录二","menuID":"m2","isContent":false,"list":[{"pID":"m2","name":"目录二--菜单一","menuID":"m21","isContent":true,"list":[]},{"pID":"m2","name":"目录二--菜单二","menuID":"m22","isContent":true,"list":[]}]}]接下来就要展示了,项目中用的element-ui的导航菜单组件,为了实现这样的树形结构,将每一级的菜单单独作为一个组件,通过判断isContent的值来递归。我直接把代码贴出来
{{item.name}} {{item.name}} tree-menu组件的代码:
{{menu.name}} {{menu.name}} 关于vue.js中怎么利用element-ui实现一个菜单树形结构就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网站名称:vue.js中怎么利用element-ui实现一个菜单树形结构
文章位置:http://cqcxhl.com/article/ijegcj.html