前端本地搜索 el-table 多层级-树形数据

最新推荐文章于 2024-06-25 15:52:18 发布

viceen

最新推荐文章于 2024-06-25 15:52:18 发布

阅读量1.6k

点赞数 2

分类专栏： vue项目-运维文章标签： js vue html

本文链接：https://blog.csdn.net/weixin_44867717/article/details/117460410

版权

vue项目-运维专栏收录该内容

111 篇文章 2 订阅

订阅专栏

前端本地搜索 el-table 多层级-树形数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let ary = [];
        let arr = [{
                id: 1,
                title: '你好吗？',
                children: [{
                        id: 11,
                        title: '很好啊',
                        children: null
                    },
                    {
                        id: 12,
                        title: '是吗',
                        children: [{
                                id: 121,
                                title: '李世民',
                                children: null
                            },
                            {
                                id: 122,
                                title: '朱元璋',
                                children: null
                            }
                        ]
                    }
                ]
            },
            {
                id: 2,
                title: '卡卡卡',
                children: [{
                    id: 21,
                    title: '非常好芬',
                    children: null
                }]
            },
            {
                id: 22,
                title: '第三方的',
                children: null
            }
        ];
        const rebuildData = (value, arr) => {
            if (!arr) {
                return []
            }
            let newarr = [];
            arr.forEach(element => {
                if (element.title.indexOf(value) > -1) {
                    const ab = rebuildData(value, element.children);
                    const obj = {
                        ...element,
                        children: ab
                    };
                    newarr.push(obj);
                    // console.log(newarr.push(obj), "236");
                } else {
                    if (element.children && element.children.length > 0) {
                        const ab = rebuildData(value, element.children);
                        const obj = {
                            ...element,
                            children: ab
                        };
                        if (ab && ab.length > 0) {
                            newarr.push(obj);
                            // console.log(newarr.push(obj), "789");
                        }
                    }
                }
            });
            // console.log(newarr, "9568");
            this.ary = newarr;
            return newarr;
        };

        console.log(rebuildData('李世民', arr));
        console.log(this.ary);
        // console.log(arr);
    </script>
</body>

</html>

打印结果-多层级表格搜索数据

在这里插入图片描述

viceen

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端本地搜索 el-table 多层级-树形数据

前端本地搜索 el-table 多层级-树形数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
复制链接

扫一扫