Skip to content

Commit 0c3edb1

Browse files
authored
fix: getFieldComponentRef will return actual ref within AsyncComponentWrapper (vbenjs#6252)
修复异步加载组件时,表单的getFieldComponentRef方法没能获取到正确的组件实例
1 parent 8ac9768 commit 0c3edb1

File tree

2 files changed

+21
-4
lines changed

2 files changed

+21
-4
lines changed

packages/@core/ui-kit/form-ui/src/form-api.ts

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import type { Recordable } from '@vben-core/typings';
1111

1212
import type { FormActions, FormSchema, VbenFormProps } from './types';
1313

14-
import { toRaw } from 'vue';
14+
import { isRef, toRaw } from 'vue';
1515

1616
import { Store } from '@vben-core/shared/store';
1717
import {
@@ -100,9 +100,26 @@ export class FormApi {
100100
getFieldComponentRef<T = ComponentPublicInstance>(
101101
fieldName: string,
102102
): T | undefined {
103-
return this.componentRefMap.has(fieldName)
104-
? (this.componentRefMap.get(fieldName) as T)
103+
let target = this.componentRefMap.has(fieldName)
104+
? (this.componentRefMap.get(fieldName) as ComponentPublicInstance)
105105
: undefined;
106+
if (
107+
target &&
108+
target.$.type.name === 'AsyncComponentWrapper' &&
109+
target.$.subTree.ref
110+
) {
111+
if (Array.isArray(target.$.subTree.ref)) {
112+
if (
113+
target.$.subTree.ref.length > 0 &&
114+
isRef(target.$.subTree.ref[0]?.r)
115+
) {
116+
target = target.$.subTree.ref[0]?.r.value as ComponentPublicInstance;
117+
}
118+
} else if (isRef(target.$.subTree.ref.r)) {
119+
target = target.$.subTree.ref.r.value as ComponentPublicInstance;
120+
}
121+
}
122+
return target as T;
106123
}
107124

108125
/**

playground/src/views/examples/form/api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ function handleClick(
134134
}
135135
case 'componentRef': {
136136
// 获取下拉组件的实例,并调用它的focus方法
137-
formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus();
137+
formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus?.();
138138
break;
139139
}
140140
case 'disabled': {

0 commit comments

Comments
 (0)