Vue中实现 将数组转换为树形结构

提示：以下是本篇文章正文内容，下面案例可供参考

1.引入插件
下载三方插件，使用arrayTotree插件，将List数组转换为树形结构数组

npm install array-to-tree -save

import arrayToTree from "array-to-tree";

引用的外部JSON数据：

{"list": 
  [
    {"id":1,"label": "中学","parent_id":0},
    {"id":2,"label": "初一","parent_id":1},
    {"id":3,"label": "初二","parent_id":1},
    {"id":4,"label": "小学","parent_id":0}
]}

文件中使用的部分：

<template>
    <div id="app">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
</template>
<script>
import axios from "axios";
import arrayToTree from "array-to-tree";
export default {
    data() {
        return {
            data: [],
            defaultProps: {
                id: "id",
                label: "label",
                children: "children",
            },
        };
    },
    created() {
        this.getOptions();
    },
    methods: {
        handleNodeClick(data) {
            console.log(data);
        },
        getOptions() {
            const url = "/api/goodsList";
            axios
                .get(url)
                .then(res => {
                    this.data = res.data.data;
                    console.log(res.data);
                    const treedata = arrayToTree(this.data, {
                        parentProperty: "parent_id",
                        customID: "id"
                    });
                    this.data = treedata;
                    console.log(treedata);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
    },
};
</script>

效果图：