vue 部门tree样式_Vue.js组件tree实现无限级树形菜单

分享一段用

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

  代码看这里喽:

  html代码:

  • { {item.text}}
  • { {item.text}}
    • { {child.text}}

  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前端组件学习教程》，欢迎大家学习阅读。

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

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