携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

最近在做一个图层列表，用到了iview的Tree组件，但是Tree组件的数据比较复杂，数据如果是已知的，直接写在代码里还好，但是我这个数据是从后端返回的，那么怎么将返回的数据生成Tree组件的数据呢。项目里面用到了，在这里记录一下，方便同样遇到问题的大家参考，也更希望大家提出不足，我继续修改完善。

数据表

首先介绍一下我在数据库里面表的结构设计

字段名	数据类型	注释
id	serial4	自增主键
layer_sheet	string	节点所在层级，0标识第一级
title	string	节点标题
expand	boolean	节点是否展开
context_menu	boolean	节点是否可以右键
children_flag	boolean	节点是否还有子节点
parent_vkey	string	节点的父级唯一标识key，最顶层节点标识为0，其余为uuid
vkey	string	节点的唯一标识，uuid
user	string	当前用户,每一个用户都有自己的一套图层数据

这里主要是每一个节点，都有一个父节点，用来标识节点的归属

这里是完整的表数据：

生成树结构

先根据接口调用后端，获取返回的数据

let res=await layerTreeApi.initFirstLayer();

再根据返回的数据，生成树结构

/*
 *@description: 生成树结构
 *@Date: 2022-08-08 23:24:41
*/
generateTreeData(data) {
    console.log(data, '接口返回的数据');
    for (let i = 0; i < data.length; i++) {
        let ele = data[i];
        if (ele.layerSheet == 0) {
            treeRecursion(ele);
        }
    }
    //递归调用，完成每一个节点下面子节点的获取
    function treeRecursion(ele) {
        ele.children = [];
        for (let j = 0; j < data.length; j++) {
            if (ele.vkey == data[j].parentVkey) {
                ele.children.push(data[j]);
                if (data[j].childrenFlag) {
                    treeRecursion(data[j]);
                }
            }
        }
    }

    //这个this.treeData是绑定在Tree组件上的数据
    this.treeData = [];
    //只获取最顶层父级数据即可
    data.forEach((item) => {
        if (item.layerSheet == 0) {
            this.treeData.push(item);
        }
    });
},

这里主要通过递归每一个节点，获取节点下面的子节点，这样就可以完成整个输结构数据的调用。

下面是整个效果图：

方法比较笨，如果有大佬给指点下，万分感谢！