---
title: Select 选择器
description:
type: 0
group: null
menuName: Select 选择器
icon:
order: 48
---
## 基本用法
参考 [Options](options)
## 自定义菜单
```schema: scope="body"
{
"type": "form",
"body": [
{
"label": "选项",
"type": "select",
"name": "select",
"menuTpl": "
${label} 值:${value}, 当前是否选中: ${checked}
",
"options": [
{
"label":"A",
"value":"a"
},
{
"label":"B",
"value":"b"
},
{
"label":"C",
"value":"c"
}
]
}
]
}
```
### 分组展示模式
_单选_
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "分组",
"type": "select",
"name": "a",
"selectMode": "group",
"options": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
}
]
}
```
_多选_
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "分组",
"type": "select",
"name": "a",
"multiple": true,
"selectMode": "group",
"options": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
}
]
}
```
### 表格模式
需要额外配置 `columns` 配置,参考 Table 中的说明。
_单选_
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "表格形式",
"type": "select",
"name": "a",
"selectMode": "table",
"columns": [
{
"name": "label",
"label": "英雄"
},
{
"name": "position",
"label": "位置"
}
],
"options": [
{
"label": "诸葛亮",
"value": "zhugeliang",
"position": "中单"
},
{
"label": "曹操",
"value": "caocao",
"position": "上单"
},
{
"label": "钟无艳",
"value": "zhongwuyan",
"position": "上单"
},
{
"label": "李白",
"value": "libai",
"position": "打野"
},
{
"label": "韩信",
"value": "hanxin",
"position": "打野"
},
{
"label": "云中君",
"value": "yunzhongjun",
"position": "打野"
}
]
}
]
}
```
_多选_
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "表格形式",
"type": "select",
"name": "a",
"selectMode": "table",
"multiple": true,
"columns": [
{
"name": "label",
"label": "英雄"
},
{
"name": "position",
"label": "位置"
}
],
"options": [
{
"label": "诸葛亮",
"value": "zhugeliang",
"position": "中单"
},
{
"label": "曹操",
"value": "caocao",
"position": "上单"
},
{
"label": "钟无艳",
"value": "zhongwuyan",
"position": "上单"
},
{
"label": "李白",
"value": "libai",
"position": "打野"
},
{
"label": "韩信",
"value": "hanxin",
"position": "打野"
},
{
"label": "云中君",
"value": "yunzhongjun",
"position": "打野"
}
]
}
]
}
```
### 树形模式
_单选_
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "树型展示",
"type": "select",
"name": "a",
"selectMode": "tree",
"options": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
}
]
}
```
_多选_
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "树型展示",
"type": "select",
"name": "a",
"multiple": true,
"selectMode": "tree",
"options": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
}
]
}
```
### 级联选择
按列来点选。
_单选_
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "级联选择",
"type": "select",
"name": "a",
"selectMode": "chained",
"options": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
}
]
}
```
_多选_
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "级联选择",
"type": "select",
"name": "a",
"selectMode": "chained",
"multiple": true,
"options": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
}
]
}
```
### 支持搜索
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "带搜索",
"type": "select",
"name": "a",
"selectMode": "chained",
"searchable": true,
"sortable": true,
"multiple": true,
"options": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
}
]
}
```
### 自定义搜索函数
默认通过[match-sorter](https://github.com/kentcdodds/match-sorter)搜索过滤 value,label 中的值
可通过`filterOption`自定义搜索过滤函数
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "带搜索",
"type": "select",
"name": "a",
"selectMode": "chained",
"searchable": true,
"filterOption": "return options.filter(({value, label, weapon}) => value?.includes(inputValue) || label?.includes(inputValue) || weapon?.includes(inputValue));",
"sortable": true,
"multiple": true,
"options": [
{
"label": "诸葛亮",
"value": "zhugeliang",
"weapon": "翡翠仙扇"
},
{
"label": "曹操",
"value": "caocao",
"weapon": "幻影双刃"
},
{
"label": "钟无艳",
"value": "zhongwuyan",
"weapon": "破岳震天锤"
},
{
"label": "李白",
"value": "libai",
"weapon": "青丝缠月剑"
},
{
"label": "韩信",
"value": "hanxin",
"weapon": "龙吟穿云枪"
},
{
"label": "云中君",
"value": "yunzhongjun",
"weapon": "飘渺云影剑"
}
]
}
]
}
```
### 延时加载
选型设置 defer: true,结合配置组件层的 `deferApi` 来实现。
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "延时加载",
"type": "select",
"name": "a",
"multiple": true,
"selectMode": "tree",
"deferApi": "/api/mock2/form/deferOptions?label=${label}&waitSeconds=2",
"options": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"defer": true
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
}
]
}
```
### 关联选择模式
分为左右两部分,左边点选后关联出现右边。左右都可以配置展示模式。
_单选_
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "关联选择模式",
"type": "select",
"name": "b",
"sortable": true,
"searchable": true,
"deferApi": "/api/mock2/form/deferOptions?label=${label}",
"selectMode": "associated",
"leftMode": "tree",
"leftOptions": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
],
"options": [
{
"ref": "zhugeliang",
"children": [
{
"label": "A",
"value": "a"
}
]
},
{
"ref": "caocao",
"children": [
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
},
{
"ref": "zhongwuyan",
"children": [
{
"label": "D",
"value": "d"
},
{
"label": "E",
"value": "e"
}
]
},
{
"ref": "libai",
"defer": true
},
{
"ref": "hanxin",
"defer": true
},
{
"ref": "yunzhongjun",
"defer": true
}
]
}
]
}
```
_多选_
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "关联选择模式",
"type": "select",
"name": "b",
"multiple": true,
"sortable": true,
"searchable": true,
"deferApi": "/api/mock2/form/deferOptions?label=${label}",
"selectMode": "associated",
"leftMode": "tree",
"leftOptions": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
],
"options": [
{
"ref": "zhugeliang",
"children": [
{
"label": "A",
"value": "a"
}
]
},
{
"ref": "caocao",
"children": [
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
},
{
"ref": "zhongwuyan",
"children": [
{
"label": "D",
"value": "d"
},
{
"label": "E",
"value": "e"
}
]
},
{
"ref": "libai",
"defer": true
},
{
"ref": "hanxin",
"defer": true
},
{
"ref": "yunzhongjun",
"defer": true
}
]
}
]
}
```
leftOptions 动态加载,默认 source 接口是返回 options 部分,而 leftOptions 是没有对应的接口可以动态返回了。为了方便,目前如果 source 接口返回的选中中,第一个 option 是以下这种格式则也会把 options[0].leftOptions 当成 leftOptions, options[0].children 当 options。同时 options[0].leftDefaultValue 可以用来配置左侧选项的默认值。
```
{
status: 0,
msg: '',
data: {
options: [
{
leftOptions: [],
children: [],
leftDefaultValue: ''
}
]
}
}
```
### 人员点选
> 请通过网络面板查看接口请求返回。
实际上就是采用的[「关联选择模式」](#关联选择模式)的 select,注意要看那一部分文档,需要知道怎么动态加载 leftOptions。左侧部分和人员都是通过 source 接口返回。需要懒加载的项通过设置 `defer` 为 true 来标记。左右两部分都支持懒加载。
都是通过 deferApi 来实现,后端根据传过来的参数决定是懒加载树,还是栏加载人员。
- 有 dep 值则是懒加载部门树
- 有 ref 值则是懒加载人员
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "人员选择",
"type": "select",
"name": "b",
"multiple": true,
"sortable": true,
"searchable": true,
"selectMode": "associated",
"leftMode": "tree",
"source": "/api/mock2/form/departUser",
"searchApi": '/api/mock2/form/departUserSearch?term=${term}',
"deferApi": "/api/mock2/form/departUser?ref=${ref}&dep=${value}"
}
]
}
```
## 限制标签最大展示数量
> 1.10.0 及以上版本
`maxTagCount`可以限制标签的最大展示数量,超出数量的部分会收纳到 Popover 中,可以通过`overflowTagPopover`配置 Popover 相关的[属性](../tooltip#属性表),注意该属性仅在多选模式开启后生效。
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"label": "水果",
"type": "select",
"name": "select",
"multiple": true,
"maxTagCount": 3,
"checkAll": true,
"defaultCheckAll": true,
"overflowTagPopover": {
"title": "水果"
},
"options": [
{"label": "苹果", "value": "Apple"},
{"label": "香蕉", "value": "Banana"},
{"label": "黑莓", "value": "Blackberry"},
{"label": "蓝莓", "value": "Blueberry"},
{"label": "樱桃", "value": "Cherry"},
{"label": "杨桃", "value": "Carambola"},
{"label": "椰子", "value": "Coconut"},
{"label": "猕猴桃", "value": "Kiwifruit"},
{"label": "柠檬", "value": "Lemon"},
{"label": "菠萝", "value": "Pineapple"}
]
}
]
}
```
## 自定义下拉区域宽度与对齐方式
> 2.8.0 以上版本
使用字符串或数字,使用数字时单位为`px`;支持单位: `%`、`px`、`rem`、`em`、`vw`。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "form",
"body": [
{
"label": "80% 宽度靠右对齐",
"type": "select",
"name": "select",
"menuTpl": "${label} 值:${value}, 当前是否选中: ${checked}
",
"overlay": {
"width": "80%",
"align": "right"
},
"options": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
},
{
"label": "300px 宽度中间对齐",
"type": "select",
"name": "select",
"menuTpl": "${label} 值:${value}, 当前是否选中: ${checked}
",
"overlay": {
"width": 300,
"align": "center"
},
"options": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
}
]
}
}
```
使用相对数值,如:`-20px` 相当于 `100% - 20px`;`+10vw` 相当于 `100% + 10vw`。支持如上相同单位。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "form",
"body": [
{
"label": "相对窄 100px 向左对齐",
"type": "select",
"name": "select",
"overlay": {
"width": "-100px",
"align": "left"
},
"popOverContainerSelector": "body",
"options": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
}
]
}
}
```
## searchApi
**发送**
默认 GET,携带 term 变量,值为搜索框输入的文字,可从上下文中取数据设置进去。
**响应**
格式要求如下:
```json
{
"status": 0,
"msg": "",
"data": {
"options": [
{
"label": "描述",
"value": "值" // ,
// "children": [] // 可以嵌套
},
{
"label": "描述2",
"value": "值2"
}
],
"value": "值" // 默认值,可以获取列表的同时设置默认值。
}
}
```
适用于需选择的数据/信息源较多时,用户可直观的知道自己所选择的数据/信息的场景,一般左侧框为数据/信息源,右侧为已选数据/信息,被选中信息同时存在于 2 个框内。
## 多选全选
开启全选后,默认开启`"checkAllBySearch": true`,检索状态下全选内容为当前过滤项。如果设置了`"checkAllBySearch": false`,则无论是否在检索状态下,全选都会选择全部数据源。
> 2.8.1 及以上版本`checkAllBySearch`默认开启
```schema: scope="body"
{
"type": "form",
"body": [
{
"label": "多选",
"type": "select",
"name": "select2",
"searchable": true,
"checkAll": true,
"multiple": true,
"clearable": true,
"source": "/api/mock2/form/getOptions"
}
]
}
```
## 属性表
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
| ------------------------ | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| options | `Array