<script>
  var treeData = [
    {id:1,name:'11',expand:true,
    children:[
      {id:2,name:'11',expand:true,
      children:[
        {id:3,name:'11',expand:true},
        {id:4,name:'11',expand:true},
        {id:5,name:'11',expand:true}
        ]
       },
        {id:6,name:'11',expand:true},
        {id:7,name:'11',expand:true}
        ]
      },
      {id:8,name:'11',expand:true},
      {id:9,name:'11',expand:true}
        ];
  export default {
    data() {
      return {
        treeData,
        current:{},
        defaultProps:{}
      };
    },
    methods:{
      doChange(nodes) {
      this.current = nodes;
    }
    }
  }
</script>
<style lang="less" scoped>
  .demo-block {
    >div {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>

# Tree 组件

----
采用`element-ui`中的样式变量，简化功能，熟悉 css \(^o^)/~。

### 基础用法

- 基础的tree用法

<div class="demo-block">
  <div>
      <h-tree
              :data="treeData"
              :current="current"
              :defaultProps="defaultProps"
              @changeCurrent="doChange"
            >
     </h-tree>
  </div>
</div>

:::demo



```html
  <div>
       <h-tree
              :data="treeData"
              :current="current"
              :defaultProps="defaultProps"
              @changeCurrent="doChange"
            >
     </h-tree>
  </div>
  <script>
 var treeData = [
    {id:1,name:'11',expand:true,
    children:[
      {id:2,name:'11',expand:true,
      children:[
        {id:3,name:'11',expand:true},
        {id:4,name:'11',expand:true},
        {id:5,name:'11',expand:true}
        ]
       },
        {id:6,name:'11',expand:true},
        {id:7,name:'11',expand:true}
        ]
      },
      {id:8,name:'11',expand:true},
      {id:9,name:'11',expand:true}
        ];
  export default {
    data() {
      return {
        treeData,
        current:{},
        defaultProps:{}
      };
    },
    methods:{
      doChange(){

      }
    }
  }
</script>

```
:::
### Attributes
| 参数         | 说明                 | 类型   | 可选值 | 默认值 |
| ------------ | -------------------- | ------ | ------ | ------ |
| data         | 数据                 | array  | -      | —      |
| Current      | 当前选中的节点对象   | object | -      | —      |
| defaultProps | 设置自定义属性(id等) | object | —      | -      |

### Events
| 事件名         | 说明             | 返回值                       |
| -------------- | ---------------- | ---------------------------- |
| @changeCurrent | 点击树节点时触发 | 当前已选中的节点数组、当前项 |
