diff --git a/packages/vant/src/picker-group/PickerGroup.tsx b/packages/vant/src/picker-group/PickerGroup.tsx
index 74bfac095..efead8dc4 100644
--- a/packages/vant/src/picker-group/PickerGroup.tsx
+++ b/packages/vant/src/picker-group/PickerGroup.tsx
@@ -1,12 +1,15 @@
import {
defineComponent,
Comment,
+ Fragment,
type InjectionKey,
type ExtractPropTypes,
+ type VNode,
} from 'vue';
// Utils
import {
+ flat,
pick,
extend,
makeArrayProp,
@@ -76,9 +79,20 @@ export default defineComponent({
const onCancel = () => emit('cancel');
return () => {
- const childNodes = slots
+ let childNodes = slots
.default?.()
- ?.filter((node) => node.type !== Comment);
+ ?.filter((node) => node.type !== Comment)
+ .map((node) => {
+ if (node.type === Fragment) {
+ return node.children as VNode[];
+ }
+
+ return node;
+ });
+
+ if (childNodes) {
+ childNodes = flat(childNodes);
+ }
const confirmButtonText = showNextButton()
? props.nextStepText
diff --git a/packages/vant/src/picker-group/test/index.spec.tsx b/packages/vant/src/picker-group/test/index.spec.tsx
index 4922573c5..d441a5e16 100644
--- a/packages/vant/src/picker-group/test/index.spec.tsx
+++ b/packages/vant/src/picker-group/test/index.spec.tsx
@@ -143,3 +143,25 @@ test('support controlled mode to set active-tab', async () => {
await later();
expect(tabs[1]?.classes()).toContain('van-tab--active');
});
+
+test('should render correctly with v-for', async () => {
+ const Comp = {
+ components: {
+ Picker,
+ PickerGroup,
+ },
+ template: `
+
+
+
+ `,
+ };
+
+ const wrapper = mount(Comp);
+ const items = wrapper.findAll('.van-swipe-item');
+
+ items.forEach((item) => {
+ const picker = item.find('.van-picker');
+ expect(picker.exists()).toEqual(true);
+ });
+});
diff --git a/packages/vant/src/utils/basic.ts b/packages/vant/src/utils/basic.ts
index 10747d55d..7912694a5 100644
--- a/packages/vant/src/utils/basic.ts
+++ b/packages/vant/src/utils/basic.ts
@@ -81,3 +81,6 @@ export const isSameValue = (newValue: unknown, oldValue: unknown) =>
export const toArray = (item: T | T[]): T[] =>
Array.isArray(item) ? item : [item];
+
+export const flat = (arr: Array) =>
+ arr.reduce((acc, val) => acc.concat(val), []);