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), []);