perf: improve autoSelect of ApiComponent (#5936)

* fix: 修复autoSelect不生效的问题,props.valueField已经被omit了

* feat: ApiComponent autoSelect支持使用函数,可以满足灵活性要求更高的场景
This commit is contained in:
ming4762 2025-04-13 20:03:18 +08:00 committed by GitHub
parent a8c4786311
commit b5700bd0b1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 15 deletions

View File

@ -151,7 +151,7 @@ function fetchApi(): Promise<Record<string, any>> {
| options | 直接传入选项数据也作为api返回空数据时的后备数据 | `OptionsItem[]` | - | - | | options | 直接传入选项数据也作为api返回空数据时的后备数据 | `OptionsItem[]` | - | - |
| visibleEvent | 触发重新请求数据的事件名 | `string` | - | - | | visibleEvent | 触发重新请求数据的事件名 | `string` | - | - |
| loadingSlot | 目标组件的插槽名称,用来显示一个"加载中"的图标 | `string` | - | - | | loadingSlot | 目标组件的插槽名称,用来显示一个"加载中"的图标 | `string` | - | - |
| autoSelect | 自动设置选项 | `'first' \| 'last' \| 'none'\| false` | `false` | >5.5.4 | | autoSelect | 自动设置选项 | `'first' \| 'last' \| 'one'\| (item: OptionsItem[]) => OptionsItem \| false` | `false` | >5.5.4 |
#### autoSelect 自动设置选项 #### autoSelect 自动设置选项
@ -160,6 +160,7 @@ function fetchApi(): Promise<Record<string, any>> {
- `first`:自动选择第一个选项 - `first`:自动选择第一个选项
- `last`:自动选择最后一个选项 - `last`:自动选择最后一个选项
- `one`:有且仅有一个选项时,自动选择它 - `one`:有且仅有一个选项时,自动选择它
- `函数`自定义选择逻辑函数的参数为options返回值为选择的选项
- false不自动选择选项 - false不自动选择选项
### Methods ### Methods

View File

@ -59,9 +59,15 @@ interface Props {
* - `first`自动选择第一个选项 * - `first`自动选择第一个选项
* - `last`自动选择最后一个选项 * - `last`自动选择最后一个选项
* - `one`: 当请求的结果只有一个选项时自动选择该选项 * - `one`: 当请求的结果只有一个选项时自动选择该选项
* - 函数自定义选择逻辑函数的参数为请求的结果数组返回值为选择的选项
* - false不自动选择(默认) * - false不自动选择(默认)
*/ */
autoSelect?: 'first' | 'last' | 'one' | false; autoSelect?:
| 'first'
| 'last'
| 'one'
| ((item: OptionsItem[]) => OptionsItem)
| false;
} }
defineOptions({ name: 'ApiComponent', inheritAttrs: false }); defineOptions({ name: 'ApiComponent', inheritAttrs: false });
@ -209,24 +215,28 @@ function emitChange() {
unref(getOptions).length > 0 unref(getOptions).length > 0
) { ) {
let firstOption; let firstOption;
switch (props.autoSelect) { if (isFunction(props.autoSelect)) {
case 'first': { firstOption = props.autoSelect(unref(getOptions));
firstOption = unref(getOptions)[0]; } else {
break; switch (props.autoSelect) {
} case 'first': {
case 'last': {
firstOption = unref(getOptions)[unref(getOptions).length - 1];
break;
}
case 'one': {
if (unref(getOptions).length === 1) {
firstOption = unref(getOptions)[0]; firstOption = unref(getOptions)[0];
break;
}
case 'last': {
firstOption = unref(getOptions)[unref(getOptions).length - 1];
break;
}
case 'one': {
if (unref(getOptions).length === 1) {
firstOption = unref(getOptions)[0];
}
break;
} }
break;
} }
} }
if (firstOption) modelValue.value = firstOption[props.valueField]; if (firstOption) modelValue.value = firstOption.value;
} }
emit('optionsChange', unref(getOptions)); emit('optionsChange', unref(getOptions));
} }