使用vue的递归组件实现树型结构

原创 番茄pan 随笔 vue.js组件 105阅读 2018-08-20 22:03:34 举报

使用递归组件实现树形结构

这是githu地址

实现的功能如下图

  • expand展开
  • actived点击高亮
  • 根据传入的数据进行节点渲染

主要是使用.vue单文件形式实现
template代码如下所示

其中用到了依赖注入来实现节点item点击激活高亮状态、递归组件来实现递归渲染、使用了函数式transition组件方式来进行动画过渡渲染

其中外部组件需要使用provide属性提供全局的currentActive属性和更改该属性的active方法,
提供的data数据结构为

其中关于节点选中激活状态那块,感觉处理的不太好,欢迎提出建议,有更好的办法欢迎告诉我(vuex和vueBus除外)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复