想法:通过观察树形菜单的布局,我们可以发现,树形菜单的数据结构应该是如下图所示:

Vue树形菜单

一个数组中包含多个对象,对应的一个对象再包含一个 二级数组(也就是展开后的菜单)。知道了数据结构,接下来我们开始做布局( 一个li标签表示一个菜单,li下的ul是对应的二级菜单)

Vue树形菜单

接下来说一下,点击展开/关闭菜单的函数实现

Vue树形菜单

expanded表示当前一级菜单是否展开,函数中的if判断,是为了在点击其它菜单时,关闭当前已经展开的菜单,最后的expanded取相反的值,是为了实现点击当前已经展开的菜单,关闭当前已经展开的菜单。

相关文章:

  • 2022-01-21
  • 2021-11-18
  • 2021-09-17
  • 2021-10-05
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-05-24
  • 2021-09-19
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-26
相关资源
相似解决方案