<script>
import treeData from '@/docs/data/data.js'
  export default {
    data() {
      return {
               selectTreeList: [],
               id:'0',
               depShowType: {
                value: "id",
                label: "name",
                children: "nodes"
                }
      };
    },
    created(){
    this.selectTreeList = treeData
    },
    methods:{
    onNode(data) {
      console.log(data)
      this.id = data.id;
    },
   toClearTree(){
      this.id=''
    }
    }
  }
</script>
<style lang="less" scoped>
  .demo-block {
    >div {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>

# SelectTree 组件


### 基础用法

- 基础的tree用法

<div class="demo-block">
  <div>
        <h-select-tree
                    :TreeWid="226"
                    :value="id"
                    :options="selectTreeList"
                    :props="depShowType"
                    tip="筛选"
                    @on-node="onNode"
                    @onClear="toClearTree"
                    />
  </div>
</div>

:::demo



```html
  <div>
     <h-select-tree
                    :TreeWid="226"
                    :value="id"
                    :options="selectTreeList"
                    :props="depShowType"
                    tip="筛选"
                    @on-node="onNode"
                    @onClear="toClearTree"
                    />
  </div>
<script>
import treeData from '@/docs/data/data.js'
  export default {
    data() {
      return {
               selectTreeList: [],
               id:'0',
               depShowType: {
                value: "id",
                label: "name",
                children: "nodes"
                }
      };
    },
    created(){
    this.selectTreeList = treeData
    },
    methods:{
    onNode(data) {
      this.id = data.id;
    },
   toClearTree(){
      this.id=''
    }
    }
  }
</script>

```
:::
### Attributes
| 参数         | 说明                 | 类型   | 可选值 | 默认值 |
| ------------ | -------------------- | ------ | ------ | ------ |
| selectTreeList| 数据                 | array  | -      | —      |
| Current      | 当前选中的节点对象   | object | -      | —      |
| defaultProps | 设置自定义属性(id等) | object | —      | -      |

### Events
| 事件名         | 说明             | 返回值                       |
| -------------- | ---------------- | ---------------------------- |
| @changeCurrent | 点击树节点时触发 | 当前已选中的节点数组、当前项 |
