render渲染多个标签不能使用 for循环渲染,只能通过数组的map等遍历的方式渲染多个标签

<script>
export default {
    isTreeNode: true,
    props: {
    // 父组件传过来的数组,这里数组的默认值要通过函数返回
        parentlistAr: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            searchName: "",
            treeAvtinr: [], // 默认选中的树 id
            backupParList: [],
            curParList: [],
        }
    },
    watch: {
        searchName: function value(val) {
            this.onSearch(val)
        }
    },
    mounted () {
        console.log('this.parentlistAr', this.parentlistAr)
        this.backupParList = JSON.parse(JSON.stringify(this.parentlistAr))
    },
    render (createElement) {
        return createElement(
            "div",
            {},
            [
                createElement(
                    "div",
                    {},
                    [
                        createElement(
                            "a-input-search",
                            {
                                attrs: {
                                    allowClear: true,
                                    vModel: "searchName",
                                    placeholder: this.backupParList.length+ 'aa'
                                },
                                on: {
                                    // search: (val) => {
                                    //     this.onSearch(val)
                                    // },
                                    input: (v) => {
                                        this.onSearch(v.target.value)
                                    }
                                }
                            },
                        )
                    ]
                ),
                this.backupParList.length ? createElement(
                    "a-tree",
                    {
                        attrs: {
                            blockNode: true,
                            defaultSelectedKeys: this.treeAvtinr,
                            defaultExpandAll: true
                        }
                    },
                    this.backupParList.length ? this.backupParList.map(item => {
                        return createElement(
                            "a-tree-node",
                            {
                                attrs: {
                                    key: item.id
                                }
                            },
                            [
                                createElement(
                                    "div",
                                    {
                                        attrs: {
                                            class: "treeAction"
                                        },
                                        slot: "title",
                                        on: {
                                            click (item) {
                                                this.getDictionary(item)
                                            }
                                        }
                                    },
                                    this.setagentNam(item)
                                ),
                                item.children&&item.children.length ? item.children.map(ite => {
                                    return createElement(
                                        "a-tree-node",
                                        {
                                            attrs: {
                                                key: ite.id
                                            }
                                        },
                                        [
                                            createElement(
                                                "div",
                                                {
                                                    attrs: {
                                                        class: "treeAction"
                                                    },
                                                    slot: "title",
                                                    on: {
                                                        click (ite) {
                                                            this.getDictionary(ite)
                                                        }
                                                    }
                                                },
                                                this.setagentNam(ite)
                                            ),
                                            ite.children&&ite.children.length ? ite.children.map(it => {
                                                return createElement(
                                                    "a-tree-node",
                                                    {
                                                        attrs: {
                                                            key: it.id
                                                        }
                                                    },
                                                    [
                                                        createElement(
                                                            "div",
                                                            {
                                                                attrs: {
                                                                    class: "treeAction"
                                                                },
                                                                slot: "title",
                                                                on: {
                                                                    click (it) {
                                                                        this.getDictionary(it)
                                                                    }
                                                                }
                                                            },
                                                            this.setagentNam(it)
                                                        ),
                                                        it.children&&it.children.length ? it.children.map(i => {
                                                            return createElement(
                                                                "a-tree-node",
                                                                {
                                                                    attrs: {
                                                                        key: i.id
                                                                    }
                                                                },
                                                                [
                                                                    createElement(
                                                                        "div",
                                                                        {
                                                                            attrs: {
                                                                                class: "treeAction"
                                                                            },
                                                                            slot: "title",
                                                                            on: {
                                                                                click (i) {
                                                                                    this.getDictionary(i)
                                                                                }
                                                                            }
                                                                        },
                                                                        this.setagentNam(i)
                                                                    ),
                                                                    i.children&&i.children.length ? i.children.map(is => {
                                                                        return createElement(
                                                                            "a-tree-node",
                                                                            {
                                                                                attrs: {
                                                                                    key: is.id
                                                                                }
                                                                            },
                                                                            [
                                                                                createElement(
                                                                                    "div",
                                                                                    {
                                                                                        attrs: {
                                                                                            class: "treeAction"
                                                                                        },
                                                                                        slot: "title",
                                                                                        on: {
                                                                                            click (is) {
                                                                                                this.getDictionary(is)
                                                                                            }
                                                                                        }
                                                                                    },
                                                                                    this.setagentNam(is)
                                                                                ),
                                                                                
                                                                            ]
                                                                        )
                                                                    })
                                                                    :
                                                                    ["is"]
                                                                ]
                                                            )
                                                        })
                                                        :
                                                        ["I"]
                                                    ]
                                                )
                                            })
                                            :
                                            ["ITE"]
                                        ]
                                    )
                                })
                                :
                                ["IT"]
                            ]
                        )
                    })
                    :
                    ["IETN"]
                )
                :
                [
                    createElement(
                        "p",
                        "暂无数据"
                    )
                ]
            ]
        )
    },
    methods: {
        onSearch (val) {
            // backupParList
            // parentlistAr
            console.log('onSearch', val)
            if (!val) {
                this.backupParList = this.parentlistAr
                return
            }
            this.backupParList = []
            let filteNode = JSON.parse(JSON.stringify(this.parentlistAr))
            if (filteNode) {
                filteNode.forEach((n, i, a) => {
                    this.filterSearchList(n,val, filteNode)
                })
            }

        },
        //点击机构
        getDictionary(row, is) {
            this.$emit('itemHandle', row)
        },
        // 机构搜索
        filterSearchList (parentlist,value, _arr) {
            let _this = this
            let tem_parentList = Object.assign([], parentlist)
            let treeDeep = this.getTreeDepth(tem_parentList)
            console.log('treeDeep', treeDeep)
            for (let i=0; i<treeDeep-1; i++) {
                let spliceCounter = 0; 
                _this.traverseTree(tem_parentList, n => {
                    if (_this.isHasChildren(n)) {
                        let children = n.children
                        let length = n.children.length - 1
                        for (let j=length; j>=0; j--) {
                            let e3 = children[j]
                            if (!_this.isHasChildren(e3) && e3.agentName.toString().indexOf(value) == -1) {
                                children.splice(j, 1)
                                spliceCounter++
                            }
                        }
                    }
                })
                if (spliceCounter == 0) {
                    break;
                }
            }
            _this.backupParList = _arr
        },
        // 获取数的深度
        getTreeDepth(node){
            if (undefined == node || null == node) {
                return 0;
            }
            // 返回结果
            let r = 0;
            // 树中当前层节点的集合。
            let currentLevelNodes = [node];
            // 判断当前层是否有节点
            while(currentLevelNodes.length > 0){
                // 当前层有节点,深度可以加一。
                r++;
                // 下一层节点的集合。
                let nextLevelNodes = new Array();
                // 找到树中所有的下一层节点,并把这些节点放到 nextLevelNodes 中。
                for(let i = 0; i < currentLevelNodes.length; i++) {
                    let e = currentLevelNodes[i];
                    if (this.isHasChildren(e)) {
                        nextLevelNodes = nextLevelNodes.concat(e.children);
                    }
                }
                // 令当前层节点集合的引用指向下一层节点的集合。
                currentLevelNodes = nextLevelNodes;
            }
            return r;
        },
        traverseTree(node, callback) {
            if (!node) {
                return;
            }
            var stack = [];
            stack.push(node);
            var tmpNode;
            while (stack.length > 0) {
                tmpNode = stack.pop();
                callback(tmpNode);
                if (tmpNode.children && tmpNode.children.length > 0) {
                    for (let i = tmpNode.children.length - 1; i >= 0; i--) {
                        stack.push(tmpNode.children[i]);
                    }
                }
            }
        },
        // 判断当前节点是否存在孩子节点
        isHasChildren(nod){
            let flag = false;
            if (nod.children && nod.children.length > 0) {
                flag = true;
            }
            return flag;
        },
        //设置名字
        setagentNam(row) {
            return (
                row.agentName +
                (row.children ? " (" + row.children.length + ")" : "(0)")
            );
        },
    }
}
</script>

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐