## Tree 樹形組件
### 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
#### [在線預覽](https://jsrun.net/AehKp/edit)
#### [子頁面示例](https://jsrun.net/jehKp/edit)
#### 舉例:
```js
{
type:"tree",
title:"權限",
field:"rule",
value:[],
props:{
data:[],//可嵌套的節點屬性的數組，生成 tree 的數據
type:'checked',//類型 支持checked和selected
multiple:false, //是否支持多選
//,當`type=selected`并且`multiple=false`,值為String或Number類型，
//其他情況為Array類型
showCheckbox:true, //是否顯示多選框
emptyText:'暫無數據' //沒有數據時的提示
},
event:{
'select-change':()=>{console.log('select-change')}, //點擊樹節點時觸發
'check-change':()=>{console.log('check-change')}, //點擊復選框時觸發
'toggle-expand':()=>{console.log('toggle-expand')}, //展開和收起子列表時觸發
}
}
```
#### maker快速生成:
```js
$formCreate.maker.tree('權限','rule',[]).props({
data:[], //數據結構參考上面
type:'checked'
})
```
#### json 生成規則
```json
{
type:"tree",
title:"權限",
field:"rule",
value:[],
props:{
data:[],//可嵌套的節點屬性的數組，生成 tree 的數據
type:'checked',//類型 支持checked和selected
multiple:false, //是否支持多選,當`type=selected`并且`multiple=false`,值為String或Number類型，其他情況為Array類型
showCheckbox:true, //是否顯示多選框
emptyText:'暫無數據' //沒有數據時的提示
},
}
```
#### data數據結構
```js
[{
title: 'parent 1',
expand: true,
selected: false,
id:1,
children: [
{
title: 'parent 1-1',
expand: true,
id:2,
children: [
{
title: 'leaf 1-1-1',
disabled: true,
id:11
},
{
title: 'leaf 1-1-2',
selected:true,
id:12
}
]
},
{
title: 'parent 1-2',
expand: true,
id:3,
children: [
{
title: 'leaf 1-2-1',
checked: true,
id:13,
},
{
title: 'leaf 1-2-1',
id:14,
}
]
}
]
}]
```
#### 參數說明
##### 基本規則 rule:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | 元素類型 | String | true | - |
| field | 字段名稱 | String | true | - |
| title | 字段別名 | String | true | - |
| value | value | String,Array | false | - |
| props | 元素配置 | Object | true | - |
| event | 元素事件 | Object | false | - |
##### 元素配置 props:
| 屬性 | 說明 | 類型 | 默認值 |
| :--- | :--- | :--- | :--- |
| data | 可嵌套的節點屬性的數組，生成 tree 的數據 | Array | \[\] |
| type | 類型 支持checked和selected | String | 'checked' |
| multiple | 是否支持多選 | Boolean | false |
| show-checkbox | 是否顯示多選框 | Boolean | false |
| empty-text | 沒有數據時的提示 | String | 暫無數據 |
| load-data | 異步加載數據的方法，見示例 | Function | - |
| render | 自定義渲染內容，見示例 | Function | - |
| children-key | 定義子節點鍵 | String | children |
##### 事件擴展 event:
| 事件名 | 說明 | 返回值 |
| :--- | :--- | :--- |
| select-change | 點擊樹節點時觸發 | 當前已選中的節點數組 |
| check-change | 點擊復選框時觸發 | 當前已勾選節點的數組 |
| toggle-expand | 展開和收起子列表時觸發 | 當前節點的數據 |
##### children
| 屬性 | 說明 | 類型 | 默認值 |
| :--- | :--- | :--- | :--- |
| title | 標題 | String ,Element String | - |
| expand | 是否展開直子節點 | Boolean | false |
| disabled | 禁掉響應 | Boolean | false |
| disableCheckbox | 禁掉 checkbox | Boolean | false |
| selected | 是否選中子節點 | Boolean | false |
| checked | 是否勾選\(如果勾選，子節點也會全部勾選\) | Boolean | false |
| children | 子節點屬性數組 | Array | - |
| render | 自定義當前節點渲染內容，見示例 | Function | - |
---
