Element的el-tree控件后台数据结构的生成以及方法的抽取

生成后台数据结构：

1. 首先，我们需要明确el-tree控件所需要的数据格式，它要求数据使用树形结构进行展示，每一项数据包含以下属性：

2. label：节点描述

3. children：子节点数据，是一个数组，也可以为空

4. 接着，我们需要对后台的原始数据进行格式化处理，使其可以被el-tree控件所展示。常见的处理方式是使用递归的方式将原始数据转换为树形结构，具体过程如下：

5. 初始化一个空数组treeList

6. 遍历原始数据源，每个节点都需要经过以下处理：

7. 将原始数据源中的每一项都转化为一个对象，包含 label 和 children 两个属性

8. 如果该节点有子节点，则递归处理子节点

9. 将生成的treeList数组返回，可传入el-tree作为树形结构数据源

方法的抽取：

1. 可将递归处理树形结构的函数进行封装，作为el-tree控件数据转换的工具方法，方便后续操作。

示例1: 以Vue为例，middlewares为原始数据的结构，生成符合el-tree控件需要的树形结构，并通过template进行展示。

<template>
  <div>
    <el-tree :data="treeData" :props="defaultProps"></el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      middlewares: [
        {
          id: '0',
          name: 'middleware 1',
          children: [
            {
              id: '1',
              name: 'middleware 1-1'
            },
            {
              id: '2',
              name: 'middleware 1-2'
            }
          ]
        },
        {
          id: '3',
          name: 'middleware 2'
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {
    treeData() {
      return this.transformData(this.middlewares);
    }
  },
  methods: {
    transformData(rawData) {
      let treeList = [];
      rawData.forEach(item => {
        let node = {
          label: item.name
        };

        if (item.children && item.children.length > 0) {
          node.children = this.transformData(item.children);
        }

        treeList.push(node);
      });

      return treeList;
    }
  }
}
</script>

示例2：以React为例，items为原始数据的结构，生成符合el-tree控件需要的树形结构，并通过jsx进行展示。

import React,{ Component } from 'react';
import { Tree } from 'element-react';
import 'element-theme-default';

class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [
        {
          id: '0',
          name: 'middleware 1',
          children: [
            {
              id: '1',
              name: 'middleware 1-1'
            },
            {
              id: '2',
              name: 'middleware 1-2'
            }
          ]
        },
        {
          id: '3',
          name: 'middleware 2'
        }
      ]
    };
  }

  render() {
    return (
      <div>
        <Tree
          data={this.transformData(this.state.items)}
          props={{children: 'children', label: 'name'}}
        />
      </div>
    );
  }

  transformData(rawData) {
    let treeList = [];
    rawData.forEach(item => {
      let node = {
        label: item.name
      };

      if (item.children && item.children.length > 0) {
        node.children = this.transformData(item.children);
      }

      treeList.push(node);
    });

    return treeList;
  }
}

export default Main;