树形结构点击选中后生成新的选中的树形结构问题

Question

test: [
            {
                id: 1,
                domain: '一级域1',
                children: [
                    {
                        id: 11,
                        domain: '二级域11',
                        parentid: 1,
                        children: [
                            {
                                id: 111,
                                domain: '三级域1121',
                                parentid: 11,
                                children: [{ id: 1111, parentid: 111,domain: '四级域111' }],
                            },
                            {
                                id: 111,
                                domain: '三级域1311',
                                parentid: 11,
                                children: [{ id: 1111,parentid: 111, domain: '四级域111' }],
                            },
                            {
                                id: 111,
                                domain: '三级域1411',
                                parentid: 11,
                                children: [{ id: 1111,parentid: 111, domain: '四级域111' }],
                            },
                            {
                                id: 111,
                                domain: '三级域1511',
                                parentid: 11,
                                children: [{ id: 1111, parentid: 111,domain: '四级域111' }],
                            },
                            {
                                id: 111,
                                domain: '三级域1611',
                                parentid: 11,
                                children: [{ id: 1111, parentid: 111,domain: '四级域111' }],
                            },
                            {
                                id: 111,
                                domain: '三级域1711',
                                parentid: 11,
                                children: [{ id: 1111,parentid: 111, domain: '四级域111' }],
                            },
                            {
                                id: 111,
                                domain: '三级域1811',
                                parentid: 11,
                                children: [{ id: 1111, parentid: 111,domain: '四级域111' }],
                            },
                            {
                                id: 111,
                                domain: '三级域1911',
                                parentid: 11,
                                children: [{ id: 1111,parentid: 111, domain: '四级域111' }],
                            },
                            {
                                id: 111,
                                domain: '三级域1110',
                                parentid: 11,
                                children: [{ id: 1111,parentid: 111, domain: '四级域111' }],
                            },
                            {
                                id: 111,
                                domain: '三级域11111',
                                parentid: 11,
                                children: [{ id: 1111,parentid: 111, domain: '四级域111' }],
                            },
                        ],
                    },
                    {
                        id: 12,
                        domain: '二级域12',
                        children: [
                            {
                                id: 112,
              domain: '三级域112',
              parentid: 12,
                                children: [{ id: 1111, parentid: 112,domain: '四级域1111' }],
                            },
                        ],
                    },
                ],
            },
            {
                id: 2,
                domain: '一级域2',
                children: [
                    {
                        id: 21,
                        domain: '二级域21',
                        parentid: 2,
                        children: [{ id: 211,parentid: 21, domain: '三级域211' }],
                    },
                    {
                        id: 22,
                        domain: '二级域22',
                        parentid: 2,
                        children: [{ id: 212, parentid: 21,domain: '三级域212' }],
                    },
                ],
            },
            {
                id: 3,
                domain: '一级域3',
                children: [
                    {
                        id: 31,
                        domain: '二级域31',
                        parentid: 3,
                        children: [{ id: 311,parentid: 31, domain: '三级域311' }],
                    },
                    {
                        id: 32,
                        domain: '二级域32',
                        parentid: 3,
                        children: [{ id: 312,parentid: 31, domain: '三级域312' }],
                    },
                ],
            },
            {
                id: 4,
                domain: '一级域4',
                children: [
                    {
                        id: 41,
                        parentid: 4,
                        domain: '二级域41',
                    },
                    {
                        id: 42,
                        parentid: 4,

                        domain: '二级域42',
                    },
                ],
            },
            {
                id: 5,
                domain: '一级域5',
            },
        ]

一个级联多选组件，想实现选中三级或四级之后 生成一个新的树形结构，这个数据只有选中的域

Answer 1

var test = [

        {
            id: 1,
            domain: '一级域1',
            children: [
                {
                    id: 11,
                    domain: '二级域11',
                    parentid: 1,
                    children: [
                        {
                            id: 111,
                            domain: '三级域1121',
                            parentid: 11,
                            children: [{ id: 1111, parentid: 111, domain: '四级域111' }],
                        },
                        {
                            id: 111,
                            domain: '三级域1311',
                            parentid: 11,
                            children: [{ id: 1111, parentid: 111, domain: '四级域111' }],
                        },
                        {
                            id: 111,
                            domain: '三级域1411',
                            parentid: 11,
                            children: [{ id: 1111, parentid: 111, domain: '四级域111' }],
                        },
                        {
                            id: 111,
                            domain: '三级域1511',
                            parentid: 11,
                            children: [{ id: 1111, parentid: 111, domain: '四级域111' }],
                        },
                        {
                            id: 111,
                            domain: '三级域1611',
                            parentid: 11,
                            children: [{ id: 1111, parentid: 111, domain: '四级域111' }],
                        },
                        {
                            id: 111,
                            domain: '三级域1711',
                            parentid: 11,
                            children: [{ id: 1111, parentid: 111, domain: '四级域111' }],
                        },
                        {
                            id: 111,
                            domain: '三级域1811',
                            parentid: 11,
                            children: [{ id: 1111, parentid: 111, domain: '四级域111' }],
                        },
                        {
                            id: 111,
                            domain: '三级域1911',
                            parentid: 11,
                            children: [{ id: 1111, parentid: 111, domain: '四级域111' }],
                        },
                        {
                            id: 111,
                            domain: '三级域1110',
                            parentid: 11,
                            children: [{ id: 1111, parentid: 111, domain: '四级域111' }],
                        },
                        {
                            id: 111,
                            domain: '三级域11111',
                            parentid: 11,
                            children: [{ id: 1111, parentid: 111, domain: '四级域111' }],
                        },
                    ],
                },
                {
                    id: 12,
                    domain: '二级域12',
                    children: [
                        {
                            id: 112,
                            domain: '三级域112',
                            parentid: 12,
                            children: [{ id: 1111, parentid: 112, domain: '四级域1111' }],
                        },
                    ],
                },
            ],
        },
        {
            id: 2,
            domain: '一级域2',
            children: [
                {
                    id: 21,
                    domain: '二级域21',
                    parentid: 2,
                    children: [{ id: 211, parentid: 21, domain: '三级域211' }],
                },
                {
                    id: 22,
                    domain: '二级域22',
                    parentid: 2,
                    children: [{ id: 212, parentid: 21, domain: '三级域212' }],
                },
            ],
        },
        {
            id: 3,
            domain: '一级域3',
            children: [
                {
                    id: 31,
                    domain: '二级域31',
                    parentid: 3,
                    children: [{ id: 311, parentid: 31, domain: '三级域311' }],
                },
                {
                    id: 32,
                    domain: '二级域32',
                    parentid: 3,
                    children: [{ id: 312, parentid: 31, domain: '三级域312' }],
                },
            ],
        },
        {
            id: 4,
            domain: '一级域4',
            children: [
                {
                    id: 41,
                    parentid: 4,
                    domain: '二级域41',
                },
                {
                    id: 42,
                    parentid: 4,

                    domain: '二级域42',
                },
            ],
        },
        {
            id: 5,
            domain: '一级域5',
        },
    ]
    var targetVal = [1, 11, 112]
    function resetData(arr, index = 0,pid=0) {
        var item = getTarget(test, arr[index])
        var temp = JSON.parse(JSON.stringify(item))
        temp.parentid=pid
        if (index < arr.length - 1) {
            temp.children = resetData(arr, ++index,temp.id)
        } else {
            delete temp.children
        }
        return temp

    }
    function getTarget(tree, id) {
        for (var i = 0; i < tree.length; i++) {
            if (tree[i].id === id) {
                return tree[i]
            } else {
                if (tree[i].children) {
                    var target = getTarget(tree[i].children, id)
                    if (target) {
                        return target
                    }
                }
            }
        }
    }
    console.log(resetData(targetVal))