## TreeUtil 树数据工具
           
### 导入使用
```code[javascript]
import TreeUtil from "niceloo-javascript-utils/packages/common/TreeUtil";
```

### 格式化原始数据为树状数据
```code[javascript]
    /**
     * 格式化树状原始数据为 el-tree识别并且具有丰富结构的数据
     * @param treeList 树状结构 [{id,name,children:[]}]
     * @param keyProps {{children: string, id: string, label: string}}
     * @returns [{}]
     */
    TreeUtil.formatByTree(treeList,keyProps);
    /**
     * 格式化树状原始数据为 el-tree识别并且具有丰富结构的数据
     * @param list 数组结构 [{id,name,pid},...]
     * @param keyProps {{pid: string, id: string, label: string}}
     * @param pid 此时需要有顶级的pid等于什么一般为null、-1等
     * @returns [{}]
     */
    TreeUtil.formatByList(list,keyProps,pid);
```
### 基本用法
> 主要解决原始数据与树状数据的转换与格式化关联关系
:::demo

```html
<template>
    <div>
        <el-button @click="formatTreeDataByTree()">格式化为树数据1</el-button>
        <el-button @click="formatTreeDataByList()">格式化为树数据2</el-button>
        <el-row>
            <el-col :span="8">
                原始数据：
                <su-code-viewer :code="sourceDataCode" style="height:200px;overflow-y:auto"></su-code-viewer>
            </el-col>
            <el-col :span="8">
                格式化后的树数据：
                <su-code-viewer :code="treeDataCode" style="height:200px;overflow-y:auto"></su-code-viewer>
            </el-col>
            <el-col :span="8">
                效果
                <el-tree :data="treeData" :props="{children: 'children',label: 'label'}" node-key="id"></el-tree>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    components: {seCodeViewer: () => import("ss-universal-client-web/comp/code/su-code-viewer")},
    data() {
        return {
            sourceData: [],
            treeData: []
        }
    },
    mounted() {
    },
    computed: {
        sourceDataCode() {
            return ObjUtil.stringify(this.sourceData);
        },
        treeDataCode() {
            return ObjUtil.stringify(this.treeData);
        }
    },
    methods: {
        formatTreeDataByTree() {
            var getTree = function (pid, level, parent) {
                level = level || 0;
                let data = [];
                if (level < 3)
                    for (let i = 0; i < 3; i++) {
                        let id = pid + "-" + i;
                        let item = {id, label: pid + "-" + i + "A", item: {}, parent};
                        item.children = getTree(id, level + 1, item);
                        data.push(item)
                    }
                return data;
            };
            this.sourceData = getTree('a');
            console.log("原始数据：", this.sourceData);
            this.treeData = TreeUtil.formatByTree(this.sourceData, {id: "id", label: 'label', children: 'children'});
            console.log("格式化后数据：", this.treeData);
        },
        formatTreeDataByList() {
            var getTree = function (data, level, pid) {
                level = level || 0;
                if (level < 3)
                    for (let i = 0; i < 3; i++) {
                        let id = pid + "-" + i;
                        let item = {id, name: pid + "-" + i + "B", pid};
                        item.children = getTree(data, level + 1, id);
                        data.push(item)
                    }
                return data;
            };
            this.sourceData = getTree([], 0, '0');
            console.log("原始数据：", this.sourceData);
            this.treeData = TreeUtil.formatByList(this.sourceData, 0, {id: "id", label: 'name', pid: "pid"});
            console.log("格式化后数据：", this.treeData);
        }
    }
};
</script>
```
:::
### 获取树数据的叶子节点数组
```code[javascript]
TreeUtil.getLeafNodes(treeList);
```

### 移除children为空的节点的 children 属性 兼容级联选择
```code[javascript]
    /**
     * 移除children为空的节点的 children 属性 兼容级联选择
     * @param list [{id,name,children:[]}]
     * @return list
     */
    TreeUtil.removeEmptyChildren(list);
```