element 中如何利用递归函数将一层结构数据组装为树形结构数据？

2021-09-15 13:05:31 阅读：114 来源： 互联网

标签：children arr 递归函数 pid label item 树形 element id

使用element 中Tree 树形控件时，有时候后端接口没有返回嵌套好的树形结构，而是返回一级的数据源，那我们前端该如何处理呢？
重点是调用filters递归函数，代码如下所示：

<!DOCTYPE html>
<html>

<head>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <meta charset="UTF-8">
    <!-- import CSS -->
    <style>

    </style>
</head>

<body>
    <div id="app">
        <el-tree :data="data"></el-tree>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                data: [],
                newArr: [],
                oldArr: [ //原始数据,pid是父级id
                    {
                        id: "1",
                        pid: "0",
                        label: "一级A"
                    },
                    {
                        id: "1-1",
                        pid: "1",
                        label: "一级A-A"
                    },
                    {
                        id: "1-1-1",
                        pid: "1-1",
                        label: "一级A-A-A"
                    },
                    {
                        id: "1-1-1-1",
                        pid: "1-1-1",
                        label: "一级A-A-A-A"
                    },
                    {
                        id: "1-2",
                        pid: "1",
                        label: "一级A-B"
                    },
                    {
                        id: "1-2-1",
                        pid: "1-2",
                        label: "一级A-B-A"
                    },
                    {
                        id: "2",
                        pid: "0",
                        label: "一级B"
                    },
                    {
                        id: "2-1",
                        pid: "2",
                        label: "一级B-A"
                    }
                ]
            }
        },
        mounted() {
            this.fun()
        },
        methods: {
            filters(arr) {
                this.newArr = arr.filter((item, itemIndex) => {
                    this.oldArr.forEach((oldItem, oldIndex) => {
                        if (oldItem.pid == item.id) { //有子节点，oldItem是item的子项
                            item.children.push(oldItem)
                        }
                        if (oldIndex == this.oldArr.length - 1) { //内层循环最后一项处理完毕
                            if (item.children && item.children.length) {//当前层级有子项，子项不为空
                                this.filters(item.children); //调用递归过滤函数
                            }
                        }
                    });
                    return true //返回过滤后的新数组赋值给this.newArr
                })
                return this.newArr
            },
            fun() {
                let arr = []
                this.oldArr.forEach((item1) => {
                    item1.children = []
                    if (item1.pid == 0) {
                        arr.push(item1)
                    }
                });
                this.data = this.filters(arr); //调用递归过滤函数
                console.log(this.data, "组装后数据");

            }
        },
    })
</script>

</html>

标签：children,arr,递归函数,pid,label,item,树形,element,id
来源： https://blog.csdn.net/qq_43069664/article/details/120306340

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

element 中如何利用递归函数将一层结构数据组装为树形结构数据？