在前端开发中，经常会遇到需要将多层级 JSON 数据渲染为树形结构的需求。本文将介绍如何使用 Vue.js 实现这个功能，包括数据格式化、组件设计和数据渲染等方面的内容。
数据格式化
首先，我们需要将从服务器端获取的原始数据进行格式化，以便在前端进行渲染。我们假设我们从服务器端获取到了如下的 JSON 数据：
-- -------------------- ---- ------- - ---- -- ----- ----- --- --------- --- ---- -- ----- ----- --- --------- --- ---- -- ----- ----- ----- --------- --- ---- -- ----- ----- ----- --------- --- ---- -- ----- ----- ----- --------- --- ---- -- ----- ----- ------- --------- --- ---- -- ----- ----- ------- --------- --- ---- -- ----- ----- ------- --------- --- ---- -- ----- ----- ------- --------- -- -
该数据代表了一个包含多个节点的树形结构，其中 parentId 表示该节点的父节点。为了便于 Vue.js 组件的渲染，我们需要将该数据格式化为以下类似的结构：
-- -------------------- ---- -------
-
-
--- --
----- ----- ---
--------- -
-
--- --
----- ----- -----
--------- -
-
--- --
----- ----- -------
--------- --
--
-
--- --
----- ----- -------
--------- --
-
-
--
-
--- --
----- ----- -----
--------- -
-
--- --
----- ----- -------
--------- --
-
-
-
-
--
-
--- --
----- ----- ---
--------- -
-
--- --
----- ----- -----
--------- -
-
--- --
----- ----- -------
--------- --
-
-
-
-
-
-这样的格式便于我们使用嵌套的组件进行递归渲染。
我们可以写一个函数来实现数据格式化：
-- -------------------- ---- -------
-------- -------------------- -
----- --- - ---
----- -------- - ---
----------------- -- -
------------- - ---
------------ - -----
---
----------------- -- -
----- ------ - -------------------
------ - -------------------------- - --------------------
---
------ ---------
-该函数通过遍历数据两次，第一次将每个节点放入一个以 id 为键的 map 中，第二次遍历根据 parentId 将每个节点放入其父节点的 children 数组中，如果该节点没有父节点，则将其放入顶层节点数组 treeData 中。最后返回 treeData 即可。
组件设计
接下来，我们需要设计一个 Vue.js 组件用于渲染树形结构数据。该组件应该包含以下功能：
- 递归渲染多层级数据。
- 点击展开/关闭子节点。
- 记录节点的展开/关闭状态。
我们可以将每个节点渲染为一个 <div>，其中包含节点名称和用于展开/关闭子节点的图标。用户可以点击节点名称或图标来展开或关闭子节点。同时，我们可以为每个节点加入一个布尔型 expanded 值，用于记录节点的展开/关闭状态。
-- -------------------- ---- -------
----------
---- -------------
---- ------------ ------------------ --------- --------
---- ------------ ------------------ ---- --------
---- ---------------- ------------------
----------
------------ -- --------------
---------------
-------------
--
------
------
-----------
--------
------ ------- -
----- -----------
------ -
----- ------
--
------ -
------ -
--------- -----
--
--
--------- -
------ -
------ ------------- - --- - ----
-
--
-------- -
-------- -
------------- - ---------------
-
-
--
---------以上代码实现了我们所需要的功能。每个节点渲染为一个 <div>，其中 name icon 和 children 分别对应节点名、展开/关闭图标和子节点。expanded 存储节点展开/关闭状态，并且 icon 根据该状态生成不同的图标。toggle 方法用于将 expanded 的值反转。
需要注意的是，我们使用了递归组件 TreeNode 来实现多层级数据的渲染。每个节点的子节点也是 TreeNode 组件，这样就可以实现嵌套的树形结构。
数据渲染
最后，我们需要将格式化后的数据通过组件渲染到页面之中。我们可以写一个新的 Vue.js 组件来负责加载数据并渲染树形结构。
-- -------------------- ---- -------
----------
---- ------------------
----------
----------- -- ---------
--------------
------------
--
------
-----------
--------
------ -------- ---- -----------------
------ ------- -
----- -----------
----------- -
--------
--
------ -
----- -----
--
--------- -
---------- -
------ --------------------------
-
-
--
---------以上代码实现了树形结构的渲染，其中 TreeView 组件用于加载 data 并通过 formatTreeData 函数将其格式化为树形结构数据。然后，该组件将使用 TreeNode 组件递归渲染每个节点，最终完成树形结构的渲染。
下面是一个完整的示例代码：
-- -------------------- ---- -------
----------
---- ------------------
----------
----------- -- ---------
--------------
------------
--
------
-----------
--------
------ -------- ---- -----------------
------ ------- -
----- -----------
----------- -
--------
--
------ -
----- -----
--
--------- -
---------- -
------ --------------------------
-
--
-------- -
-------------------- -
----- --- - ---
----- -------- - ---
----------------- -- -
------------- - ---
------------ - -----
---
----------------- -- -
----- ------ - -------------------
------ - -------------------------- - --------------------
---
------ ---------
-
-
--
---------
-------
----- -
-------- -----
-------------- ----
-
----- -
----- --
------- --------
-
--------- -
------------ -----
-
----- -
------ -----
----------- -------
------- --------
-
---------- -------------------- ---- -------
----------
---- -------------
---- ------------ ------------------ --------- --------
---- ------------ ------------------ ---- --------
---- ---------------- ------------------
----------
------------ -- --------------
---------------
-------------
--
------
------
-----------
--------
------ ------- -
----- -----------
------ -
----- ------
--
------ -
------ -
--------- -----
--
--
--------- -
------ -
------ ------------- - --- - ----
-
--
-------- -
-------- -
------------- - ---------------
-
-
--
---------
-------
----- -
-------- -----
-------------- ----
-
----- -
----- --
------- --------
-
--------- -
------------ -----
-
----- -
------ -----
----------- -------
------- --------
-
--------使用该组件只需要传入从服务器端获取的原始数据即可：
-- -------------------- ---- -------
----- --- - --- -----
--- -------
----------- -
--------
--
----- -
----- --
--
----- --------- -
----- -------- - ----- ------------------------------------
--------- - ----- ----------------
-
---以上代码将从服务器端获取数据，并将其传递给 TreeView 组件进行渲染。
结论
通过本文的介绍，我们了解了如何使用 Vue.js 将多层级 JSON 格式数据渲染为树形结构。我们首先需要将原始数据格式化为树形结构，然后使用 Vue.js 组件递归渲染每个节点，并记录每个节点的展开/关闭状态。最后，我们可以通过使用新的组件来加载数据并渲染树形结构。
希望本文对你有所启发，如果你想深入学习 Vue.js，请参考 Vue.js 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67503d0dfbd23cf89075d81e