# SelectTree 树形控件
# SelectTree 概述
当区块正在获取数据中时可使用，适当的等待动画可以提升用户体验。
selectTree组件设置firstValue和v-model初始设置的值不在data中时，实际v-model有值仅框内无回显，后更新data时，重新判断是否在data内有对应值，如果没有则清空value。
# SelectTree 代码演示
# 基础用法
最简单使用 selectTree 的方法。
# 显示多选框
显示多选框
# 父子组件是否不联动
父子节点不联动（只在显示多选框模式下使用）
# 模糊匹配
模糊匹配
多选框下 模糊匹配
# SelectTree API
# selectTree props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 输入框的值，可使用 v-model 双向绑定(如果需要在组件外部设置加载默认值请移步firstValue) | String/Number/Array(单选时为 String/Number 类型，多选时为 Array 类型) | -- |
firstValue.sync(v1.0.85) | 在组件外部设置输入框内的值（已经支持多选，多选只在12版本以及以上支持）若出现firstValue和value值不同步问题，表单不能重置等问题，可在firstValue设置sync修饰符 (v1.0.85) | String/Number/Array(单选时为String/Number类型，多选时为Array类型，开启 isString 后为用","分割的 String 类型) | -- |
| data | 可嵌套的节点属性的数组，生成 tree 的数据 | Array | [] |
| showCheckbox | 是否多选(支持 ctrl+a 全选、ctrl+d 全不选) | Boolean | false |
| checkStrictly | 父子节点不联动(只在多选模式下使用) | Boolean | false |
| placeholder | 输入框内部提示语句 | String | -- |
| clearable | 是否显示可清除按钮 | Boolean | true |
| disabled | 输入框禁用 | Boolean | false |
| size | selectTree 尺寸，可选值为 large 和 small 或者不填(只在单选时生效) | String | - |
| placement | 下拉框出现的位置，可选值为 top 和 bottom | String | - |
| filterable | 是否支持模糊匹配 | Boolean | false |
| showBottom | 是否将筛选框显示在下拉框里面 | Boolean | false |
| transfer | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | Boolean | false |
| isString | 只在多选模式下使用,将多选时双向绑定的变量的格式变为 String 类型，多个选项用','隔开 | Boolean | false |
| isAlwaysSelect | 重复点击某节点，是否总是选中当前节点，render 情况不可用，建议单选使用(此属性仅在v1.0.47或以上版本有效) | Boolean | false |
| formatValue | 设置 v-model 双向绑定的输入输出值（显示值不变），例如设置 formatValue='id',其双向绑定的值为每一项数据的 id，（id必须是唯一关键字，数据内 id 不可重复） | String | title |
| expanLevel | 定位下拉框重树数据展开层级(默认2级，0级为不操作展开层级)(设置了 expanLevel 为 true 后，相关层级的 expand 属性不起效) | Number | 2 |
| dropWidth | 设置下拉框的宽度,不设置时下拉框的宽度等于输入框宽度 | String/Number | - |
| searchHolder | 搜索框显示位置在下拉框中时，框内显示文字 | String | 请输入匹配字段 |
| onlyChild | 只选择子节点，父节点只做显示操作使用，不传递实际数据（只在父子联动的情况下有效） (此属性只在1.0.10或以上版本有效) | Boolean | false |
| checkIndeter | 将选择项的父节点也选中（及选中半选中节点）（只在多选父子联动的情况下有效） (此属性只在1.0.12或以上版本有效) | Boolean | false |
| render | 自定义渲染节点(v1.0.46) | Function | - |
| isTreeFilter | 是否进行下拉树过滤，不能与 remote 同时使用,需配置 filterable,placement=bottom (v1.0.62) | Boolean | false |
| selectToCheck | 支持点击文字选中勾选框，及点击文字和点击勾选框是一样的效果(v1.0.64) | Boolean | false |
| showTitle | 是否显示提示(v1.0.76) | Boolean | true |
| showTotalNum | 离开当前选项框时显示当前选择项数目，项数大于2时生效(v1.0.76) | Boolean | false |
| remote | 支持远程搜索(v1.0.78) 注意：多选时，选中项只支持选择当前搜索下拉列表的项目，上次搜索选中的将会清空 | Boolean | false |
| remote-method | 远程搜索方法(v1.0.81) | Function | - |
| loading | 当前是否正在远程搜索 | Boolean | false |
| loading-text | 远程搜索中的文字提示 | String | 加载中 |
| setValueNotEmit | 非点选、初始赋值是否需要触发on-select-change或on-check-change事件(默认false即会触发，true为不触发) | Boolean | false |
| selectChildOnly | 单选时生效，只可点选子节点，点击父节点不执行选中逻辑，触发on-parent-node-click事件 | Boolean | false |
# selectTree event
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-select-change | 点击树节点时触发 | 当前已选中的节点数组 |
| on-check-change | 点击复选框时触发 | 当前已勾选节点的数组 |
| on-toggle-expand | 展开和收起子列表时触发 | 当前节点的数组 |
| on-focus | 获取焦点时触发（仅在设置 filterable 时有效） | - |
| on-blur | 失去焦点时触发（仅在设置 filterable 时有效） | - |
| on-parent-node-click | 开启selectChildOnly属性时点击父节点生效 | 当前点击的节点的数组 |
# selectTree methods
| 方法 | 说明 |
|---|---|
| focus | 通过 this.refs.xxx.focus() 调用,是当前输入框获取焦点,并打开选择面板(此方法只在1.0.9或以上版本有效) |
| blur(此属性只在1.0.10或以上版本有效) | 手动取消输入框焦点 (this.$refs.xxx.blur()) |
# Select Slot
| 名称 | 说明 |
|---|---|
| header | 自定义弹框头部内容（v1.4.0） |
| footer | 自定义弹框尾部内容（v1.4.0） |
# SelectTree children
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | String | Element String | - |
| expand | 是否展开直子节点 | Boolean | false |
| disabled | 禁掉响应 | Boolean | false |
| disableCheckbox | 禁掉 checkbox | Boolean | false |
| selected | 是否选中子节点 | Boolean | false |
| checked | 是否勾选(如果勾选且在父子树节点联动且当前节点为父树节点的情况下，子节点也会全部勾选) | Boolean | false |
| children | 子节点属性数组 | Array | - |