ant vue tree 递归jsx 组件开发

本来想自定义组件的发现  只支持ant 自己直接子集的组件

 

 

   <a-tree
                    class="u-ant-tree"
                     default-expand-all
                      show-icon 
                    >
                       <template v-for="t in treeData" >
                            <treeNodeCustom :t="t" :key="t.key" ></treeNodeCustom>
                       </template>
                 </a-tree>

　　

<template>
     <a-tree-node :key="t.key">
            <a-icon slot="icon" type="smile-o" />
            <span slot="title">{{t.key}}</span>
            <tempalte v-if="t.children&&t.children.length>0">
                 <treeNodeCustom   v-for="item in t.children" :t="item" :key="item.key" > </treeNodeCustom>
            </tempalte>
     </a-tree-node>
</template>

<script>
export default {
    name:'treeNodeCustom',
    props:{
         t:{
             
         }
    },
    data() {
        return {
            
        }
    },
}
</script>

<style lang="less" scoped>

</style>

　　

 

所以直接使用vue  jsx 来实现

<script>
export default {
    props: {
        treeData: {
            default() {
                return [
                    {
                        title: 'parent 1',
                        key: '0-0',
                        all: 1111,
                        children: [
                            { title: 'leaf', all: 1111, key: '0-0-0', },
                            { title: 'leaf', all: 1113, key: '0-0-1',}
                        ]
                    }
                ];
            }
        }
    },
    methods: {
      
    },
    render() {
         function DeepDom(list) {
            let arr = [];
            if (list.length > 0) {
                arr = list.map(t => {
                    return (
                        <a-tree-node key={t.key}>
                            <a-icon slot="icon" type="smile-o" />
                            <span slot="title">{t.title}</span>
                            {t.children && DeepDom(t.children)}
                        </a-tree-node>
                    );
                });
            }
            return arr;
        }
        let {treeData} = this;
        return (
            <a-tree class="u-ant-tree" className="u-ant-tree" default-expand-all show-icon>
               {DeepDom(treeData)}
            </a-tree>
        );
    }
};
</script>