这篇文章主要给大家介绍了关于利用Vue2.x开发实现JSON树的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
前言
最近工作中遇到一个需求,由于项目需要一个解析 JSON 字符串并生成 JSON 树的功能,在 GitHub 上也没有找到合适的组件,因此基于 Vue2.X 自己写了一个 JSON 树组件,主要原理是利用 Vue 的递归组件,进行深度优先的先序遍历。该组件不仅可以将一段不可读的 JSON 字符串转化为可读的树形结构,同时可用于抓取某一子树的数据。
Github源码
Github-Page
组件在它的模板内可以递归地调用自己。不过,只有当它有 name 选项时才可以这么做
字符串数据美化功能:
特定层级数据抓取功能:
<tree :parent-data="data" :data="item" :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)" :path-checked="pathChecked" :path-selectable="pathSelectable" :selectable-type="selectableType" :index="index" :child="true" @click="handleItemClick"> </tree>
通过 parent-data 传入父亲的数据,data 传入孩子的数据,当子树的数据是简单类型时,不再进入递归,同时该组件提供了一个 click 事件,用于获取特定节点的树数据,而孩子的数据,则通过递归机制不断向上一层级传递,类似于“冒泡机制”。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Atas ialah kandungan terperinci 使用Vue2.x如何实现JSON树. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!