# custom_tree基本结构

## custom_tree props
```
{
    expander: {
        el: {},
        popup: {
            type: "bi.custom_tree"
        }
    },
    items: [],
    itemsCreator: BI.emptyFn,
    el: {
        type: "bi.button_tree",
        chooseType: 0,
        layouts: [{
            type: "bi.vertical"
        }]
    }
}
```

### expander
expander在custom_tree中的作用是用来控制展开收起行为.参考上一节expander的props定义,custom_tree的props属性中expander字段用来控制expander. 

### el
el对应的是expander中popup属性对应的el字段,用来控制树展开之后的内容是什么

### items和itemsCreator
custom_tree实际上就是抽象的把items构建出一份树结构
```
[
    {
        type: "bi.select_tree_expander",
        el: {
            id: "1",
            type: "bi.test_node",
        },
        popup: {
            type: "bi.custom_tree",
            expander: {
                type: "bi.select_tree_expander",
                isDefaultInit: false,
                el: {},
                popup: {
                    type: "bi.custom_tree",
                },
            },
            items: [
                {
                    id: "1-1",
                    type: "bi.test_item",
                },
            ],
            el: {
                type: "bi.loader",
                next: false,
                el: {
                    type: "bi.button_tree",
                    chooseType: 1,
                    layouts: [
                        {
                            type: "bi.vertical",
                        },
                    ],
                },
            },
        },
        isDefaultInit: false,
        id: "1",
        items: [
            {
                id: "1-1",
                type: "bi.test_item",
            },
        ],
    },
    {
        type: "bi.select_tree_expander",
        el: {
            id: "2",
            type: "bi.test_node",
        },
        popup: {
            type: "bi.custom_tree",
            expander: {
                type: "bi.select_tree_expander",
                isDefaultInit: false,
                el: {},
                popup: {
                    type: "bi.custom_tree",
                },
            },
            items: [
                {
                    id: "2-1",
                    type: "bi.test_item",
                },
            ],
            el: {
                type: "bi.loader",
                next: false,
                el: {
                    type: "bi.button_tree",
                    chooseType: 1,
                    layouts: [
                        {
                            type: "bi.vertical",
                        },
                    ],
                },
            },
        },
        isDefaultInit: false,
        id: "2",
        items: [
            {
                id: "2-1",
                type: "bi.test_item",
            },
        ],
    },
];
```

看上边格式化出的数据结构.最外层为两个`bi.select_tree_expander`,el是我们指定的父级节点,他的popup是另一层custom_tree嵌套,最终渲染出来的是`bi.loader`