Vue.js组件tree实现无限级树形菜单

分享一段用

  • 标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下。
    代码看这里喽:

    html代码:

    js代码:

    methods: {
     toggleChildren: function(item) {
     item.expanded = !item.expanded;
     },
     },
     data() {
     return {
     menus:[{
     text:'水果',
     expanded:false,
     children:[{
     text:'苹果',
     },{
     text:'荔枝'
     },{
     text:'葡萄'
     },{
     text:'火龙果'
     }]
     },{
     text:'好吃的',
     expanded:false,
     children:[{
     text:'糖',
     },{
     text:'面包'
     },{
     text:'火腿'
     },{
     text:'薯片'
     },{
     text:'碎碎面'
     }]
     },{
     text:'饮料',
     expanded:false,
     children:[]
     }]
     }
     },
    
    

    效果图:

    Vue.js组件tree实现无限级树形菜单_第1张图片

    本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

    关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(Vue.js组件tree实现无限级树形菜单)