## Select 下拉選擇框
### 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
#### [在線預覽](https://jsrun.net/FehKp/edit)
#### 舉例:
```js
{
type: "select",
field: "cate_id",
title: "產品分類",
value: ["104","105"],
options: [
{"value": "104", "label": "生態蔬菜", "disabled": false},
{"value": "105", "label": "新鮮水果", "disabled": false},
],
props: {
"multiple": true,
"placeholder": "請選擇",
"not-found-text": "無匹配數據",
"placement": "bottom",
},
}
```
#### maker快速生成:
```js
$formCreate.maker.select("產品分類","cate_id",["104","105"]).options([
{"value": "104", "label": "生態蔬菜", "disabled": false},
{"value": "105", "label": "新鮮水果", "disabled": false},
]).props({
multiple:true
})
```
#### json 生成規則
```json
{
type: "select",//必填!
field: "cate_id",//必填!
title: "產品分類",//必填!
//input值
value: ["104","105"],
//可選參數
options: [
{"value": "104", "label": "生態蔬菜", "disabled": false},
{"value": "105", "label": "新鮮水果", "disabled": false},
],//必填!
props: {
//是否支持多選
"multiple": true,
//是否可以清空選項，只在單選時有效
"clearable": false,
//是否支持搜索
"filterable": true,
// 暫不支持遠程搜索
// "remote": false, //是否使用遠程搜索
// "remote-method":Function, //遠程搜索的方法
// "loading": false, //當前是否正在遠程搜索
// "loading-text": "加載中", //遠程搜索中的文字提示
//選擇框大小，可選值為large、small、default或者不填
"size":"default",
//選擇框默認文字
"placeholder": "請選擇",
//當下拉列表為空時顯示的內容
"not-found-text": "無匹配數據",
//彈窗的展開方向，可選值為 bottom 和 top
"placement": "bottom",
//是否禁用
"disabled": false,
},
validate:[],
}
```
#### 參數說明
##### 基本規則 rule:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | 元素類型 | String | true | - |
| field | 字段名稱 | String | true | - |
| title | 字段別名 | String | true | - |
| value | 字段值,當props.multiple設置為true是 value為數組 | String,Number,Array | false | - |
| options | 可選參數 | Array | true | - |
| props | 元素配置 | Object | false | - |
| event | 元素事件 | Object | false | - |
| validate | 驗證規則 | Array | false | - |
##### 可選參數 Options:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| value | 參數值 | String,Number | true | - |
| label | 字段別名 | String | true | - |
| disabled | 設置為禁用狀態 | Boolean | false | false |
##### 元素配置 props:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| multiple | 是否支持多選 | Boolean | false | false |
| clearable | 是否可以清空選項，只在單選時有效 | Boolean | false | false |
| filterable | 是否支持搜索 | Boolean | false | true |
| size | 選擇框大小，可選值為large、small、default或者不填 | String | false | - |
| placeholder | 選擇框默認文字 | String | false | - |
| notFoundText | 當下拉列表為空時顯示的內容 | String | false | '無匹配數據' |
| placement | 彈窗的展開方向，可選值為 bottom 和 top | String | false | 'bottom' |
| disabled | 是否禁用 | Boolean | false | false |
##### 事件擴展 event:
| 事件名稱 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| change | 選中的Option變化時觸發，返回 value | Function | false | - |
| query-change | 搜索詞改變時觸發 | Function | false | - |
---
