CommonSelect公共选择器

公共选择器支持select selectV2 treeSelect。

基础使用

直接使用:1-选项1
form中使用:{}
table中使用:[ {} ]

直接使用

form中使用

字段:

请选择字段

table中使用

展开代码

复制代码

组件类型

普通:

请选择普通

虚拟化:

请选择虚拟化

树下拉:

请选择树下拉

展开代码

复制代码

多选

{}

字段:

请选择字段

展开代码

复制代码

多选添加分隔符

{}

字段:

请选择字段

展开代码

复制代码

获取请求数据

下面我们模拟一个请求
内部默认做了api的包装器 如果想自定义可以通过hooks asyncCache包装后传入会进行复写

字段:

请选择字段

展开代码

复制代码

请求结果字段对照

如果请求结果不是value label形式 则使用labelField valueField 获取

{}

字段:

请选择字段

展开代码

复制代码

结果的格式转化

比如接口给出的数据是字符串 我们业务中存的是数字 可能就匹配不上 使用valueType

数据源：[ { "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" } ]

{}

字段:

请选择字段

展开代码

复制代码

如果请求格式不一致或者value label等需要拼接

使用parseData当然这个可以全局注册一下 开发中如果不满足 在config中复写下

{}

字段:

请选择字段

字段2:

请选择字段2

展开代码

复制代码

字典

首先需要在main.ts中全局注册下 这个项目的字典数据获取方法 注入这个getDictOptions参数 函数返回一个Promise 下面我们模拟下

{}

字段:

请选择字段

字段2:

请选择字段2

展开代码

复制代码

请求参数/过滤options

在api情况下是给传入的函数添加参数 并且query返回的数据变化会触发用新参数请求

第一个字段是第二个字段的搜索条件

字段:

请选择字段

字段:

请选择字段

展开代码

复制代码

绑定options配置query

条件:

字段:

请选择字段

过滤1:

请选择过滤1

过滤2:

请选择过滤2

过滤2:

请选择过滤2

展开代码

复制代码

{}

字典过滤同options过滤

字段:

请选择字段

展开代码

复制代码

等待全部query参数都有值时 获取数据

等待全部参数加载完成,获取选项

条件1:

条件2:

字段:

请选择字段

展开代码

复制代码

自动选中

支持多种自动选择策略，只有 api 和 dict 才有效

• false: 不自动选择
• true 或 'one': 只有一个选项时自动选择（默认行为）
• 'first': 总是自动选择第一个选项
• 'last': 总是自动选择最后一个选项

注意: 如果 model 已经有值，不会执行自动选择（防止覆盖用户数据）

{}

字段:

请选择字段

展开代码

复制代码

追加选项

追加选项 内部会去重

字段:

请选择字段

展开代码

复制代码

排序

原始数据: [ { "label": "选项1", "value": 1 }, { "label": "选项3", "value": 3 }, { "label": "选项2", "value": 2 }, { "label": "选项5", "value": 5 }, { "label": "选项6", "value": 6 } ]

字段:

请选择字段

字段:

请选择字段

展开代码

复制代码

CommonSelect 属性 (Props)

属性	说明	类型	默认值
api	请求 API 接口方法	Function	-
dict	字典名称，用于从字典中获取选项	string | string[]	-
query	请求参数配置方法	Function	-
valueField	值字段的对照字段名	string	-
labelField	文本字段的对照字段名	string	-
parseData	转化请求结果的方法	Function	-
autoSelect	自动选择策略：false 不选择 / true|'one' 仅一个时选择 / 'first' 总是选第一个 / 'last' 总是选最后一个	boolean | 'one' | 'first' | 'last'	false
multiple	是否为多选	boolean	false
needAllQueryParams	是否需要传递所有查询参数	boolean	false
appendOptions	追加的选项列表或方法	Record<any, any>[] | Function	-
valueType	值类型，支持 'string', 'String', 'int', 'Int'	'string' | 'String' | 'int' | 'Int'	-
options	绑定的选项列表	Record<any, any>[]	-
ignoreByLabel	忽略的标签列表	string[]	-
componentType	组件类型，支持 'ElSelectV2', 'ElSelect', 'ElTreeSelect'	'ElSelectV2' | 'ElSelect' | 'ElTreeSelect'	'ElSelect'
joinSplit	多选时结果合并的拼接符	string	无
orderBy	排序字段名	string	-
orderType	排序方式，支持 'asc' 或 'desc'	'asc' | 'desc'	-
getDictOptions	获取字典选项的方法	Function	-