## Cascader 多級聯動
### 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
> 省市區聯動json數據
>
> [https://github.com/xaboy/form-create/tree/master/district](https://github.com/xaboy/form-create/tree/master/district)
#### [在線預覽](https://jsrun.net/EehKp/edit)
#### 舉例:
```js
{
type:"cascader",
title:"所在區域",
field:"address",
value:['陜西省','西安市','新城區'],
props:{
//省市區三級聯動json數據
data:window.province,
renderFormat:label => label.join(' / '),
},
}
```
#### maker快速生成:
```js
$formCreate.maker.cascader('所在區域','address',['陜西省','西安市','新城區']).props({
data:window.province
})
```
#### json 生成規則
```json
{
type:"cascader",//必填!
title:"所在區域",//必填!
field:"address",//必填!
//input值
value:['陜西省','西安市','新城區'],
props:{
//可選項的數據源，格式參照示例說明
data:window.province || [],//必填!
//選擇后展示的函數，用于自定義顯示格式
renderFormat:label => label.join(' / '),
//是否禁用選擇器
disabled:false,
//是否支持清除
clearable:true,
//輸入框占位符
placeholder:'請選擇',
//次級菜單展開方式，可選值為 click 或 hover
trigger:'click',
//當此項為 true 時，點選每級菜單選項值都會發生變化，具體見上面的示例
changeOnSelect:false,
//輸入框大小，可選值為large和small或者不填
size:undefined,
//動態獲取數據，數據源需標識 loading
loadData:()=>{},
//是否支持搜索
filterable:false,
//當搜索列表為空時顯示的內容
notFoundText:'無匹配數據',
//是否將彈層放置于 body 內，在 Tabs、帶有 fixed 的 Table 列內使用時，建議添加此屬性，它將不受父級樣式影響，從而達到更好的效果
transfer:false,
},
validate:[],
}
```
#### 參數說明
##### 基本規則 rule:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | 元素類型 | String | true | - |
| field | 字段名稱 | String | true | - |
| title | 字段別名 | String | true | - |
| value | 字段值 | String | false | - |
| props | 元素配置 | Object | true | - |
| event | 元素事件 | Object | false | - |
| validate | 驗證規則 | Array | false | - |
##### 元素配置 props:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| data | 可選項的數據源 | Array | true | - |
| renderFormat | 選擇后展示的函數，用于自定義顯示格式 | Function | false | label => label.join\(' / '\) |
| trigger | 次級菜單展開方式，可選值為 click 或 hover | String | false | 'click' |
| placeholder | 占位文本 | String | false | - |
| confirm | 是否顯示底部控制欄，開啟后，選擇完日期，選擇器不會主動關閉，需用戶確認后才可關閉 | Boolean | false | false |
| size | 輸入框大小，可選值為large和small或者不填 | String | false | - |
| clearable | 是否支持清除 | Boolean | false | true |
| disabled | 是否禁用選擇器 | Boolean | false | false |
| changeOnSelect | 當此項為 true 時，點選每級菜單選項值都會發生變化 | Boolean | false | false |
| filterable | 是否支持搜索 | Boolean | false | false |
| notFoundText | 當搜索列表為空時顯示的內容 | String | false | '無匹配數據' |
| transfer | 是否將彈層放置于 body 內，在 Tabs、帶有 fixed 的 Table 列內使用時，建議添加此屬性，它將不受父級樣式影響，從而達到更好的效果 | Boolean | false | false |
| loadData | 動態獲取數據，數據源需標識 loading | Function | false | - |
##### 事件擴展 event:
| 事件名稱 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| change | 選擇完成后的回調，返回值 value 即已選值 value，selectedData 為已選項的具體數據 | Function | false | - |
| visible-change | 展開和關閉彈窗時觸發 | Function | false | - |
---
