基础用法
请求获取选项
这里没有代理后端服务,所有这里的请求会是404
TIP
组件会监听api
、serviceParams
、serviceMethod
、mapObj
,只要这些值有变化,就会重新请求options。这里重点要说的是mapObj
,这种引用类型的数据最好不要直接写在模板里面(像这里例子里面的第四个),要在先在数据里面定义好,然后再传进去(像这里例子里面的第二个)。直接写在模板里面,在组件渲染完后会触发一次监听事件,这样会导致组件会多请求一次options。可以打开控制台看网络请求来验证这一情况。
外部展示选中内容
这里主要使用的Exposes
出来的selectObj
,selectObj
是一个ComputedRefImpl
且有set
属性,修改它的值,会自动更新到组件上。
options插槽
TIP
无论是使用options插槽还是,自定义请求options,都请保证每项选项对象里面label
和value
字段存在。
选择器 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
model-value / v-model | 绑定值 | string \ Array | — |
options | 选择器的选项列表,如果有api请求会覆盖掉这个值 | Array | — |
api | 请求选项列表的接口 | string | — |
serviceMethod | 请求选项列表的请求方式 | string | —,没有默认值,但是会拿去注册组件时的serviceOptions.defaultMethod,默认是post |
serviceParams | 请求选项列表的请求参数 | Object | — |
mapObj | 请求选项列表需要进行映射的对象,下面会具体列出 | Object | — |
selectAllText | 多选选中全部的展示文字 | string | 全部 |
connectors | 多选选中多个选项的连接符 | string | 、 |
其他选择器的属性请参考element-plus. 另外查询组件通用属性请查看查询组件通用.
cbs 回调函数说明
回调函数名 | 说明 | 参数 |
---|---|---|
beforeSearch | 在通过api查询options之前执行的回调函数,若返回 false 或者返回被 reject 的 Promise,则阻止切换。 | (params) => res, params :当前请求参数, res : 有正常返回会作为实际的请求参数 |
afterSearch | 在通过api查询options之后执行的回调函数 | (list, options, modelValue) => {}. list :请求到的列表, options : 绑定到下拉框里的原始对象,modelValue :选中绑定值的原始对象 |
defineSearch | 自定义的请求方法,有这个方法就不会做默认的请求 | (options, modelValue) => {}. options : 绑定到下拉框里的原始对象,modelValue :选中绑定值的原始对象 |
filterCallback | 过滤的回调函数,若返回 false 或者返回被 reject 的 Promise,则阻止切换。正常返回数组,则作为过滤结果展示 | (keyword, options, modelValue) => arr.keyword :过滤的keyword, options : 所有选项,modelValue :选中绑定值的原始对象 |
mapObj字段说明
字段名 | 说明 |
---|---|
list | 后端返回对象里作为options数据的字段,没有就取整个返回的数据 |
label | 后端返回对象里作为options数据label的字段,默认label |
value | 后端返回对象里作为options数据value的字段,默认value |
self | 存在表示数据项里面是字符串,需要将这个字符串作为label 、value |
选择器 事件
选择器事件请查看 element-plus. 另外查询组件通用事件请查看查询组件通用
选择器 插槽
插槽名 | 说明 |
---|---|
- | 默认的选项组件列表 |
option | 选项插槽,里面的数据有 item:当前选项原始数据, index:当前选项索引 |
empty | 无选项时的列表 |
选择器 Exposes
属性名 | 说明 | 类型 |
---|---|---|
ref | element-plus的 el-select 元素,具体内容查看 element-plus | RefImpl |
keyword | 多选的过滤keyword | String |
filterInput | 多选的过滤input元素 | RefImpl |
focusFilter | 聚焦多选input框的方法 | Function |
baseDao | 请求的baseDao | Object |
serviceConfig | 组件的全局请求配置 | Object |
noFilterOptions | 多选过滤后是否有数据的标志 | RefImpl<Boolean> |
selectObj | 选中值的原始对象,单选时对象,多选是数组 | RefImpl<Object | Array> |
checkedAll | 多选选中全部的标志 | RefImpl<Boolean> |