利用Vue2.x开发实现JSON树的方法

　　

　　

最近工作中遇到一个需求,由于项目需要一个解析JSON字符串并生成JSON树的功能,在GitHub上也没有找到合适的组件,因此基于Vue2。X自己写了一个JSON树组件,主要原理是利用Vue的递归组件,进行深度优先的先序遍历。该组件不仅可以将一段不可读的JSON字符串转化为可读的树形结构,同时可用于抓取某一子树的数据。

　　

　　<李> Github源码李 　　<李> Github-Page李 　　

　　

组件在它的模板内可以递归地调用自己,不过,只有当它有名字选项时才可以这么做
　　

　　

<强>字符串数据美化功能:

　　

　　

<>强特定层级数据抓取功能:

　　

　　 　　 　　& lt;树 　　:parent-https://www.yisu.com/zixun/data=笆荨? 　　:数据=" https://www.yisu.com/zixun/item " 　　路径:路径=" + (Array.isArray(数据)& # 63;“[${指数}]”:“${指数}'。” 　　:path-checked=" pathChecked” 　　:path-selectable=" pathSelectable” 　　:selectable-type=" selectableType” 　　:指数="指数” 　　:孩子=" true " 　　@click=癶andleItemClick”比; 　　& lt;/tree> 　　 　　

通过parent-data传入父亲的数据,数据传入孩子的数据,当子树的数据是简单类型时,不再进入递归,同时该组件提供了一个点击事件,用于获取特定节点的树数据,而孩子的数据,则通过递归机制不断向上一层级传递,类似于“冒泡机制”。

　　

　　

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。

利用Vue2.x开发实现JSON树的方法