fix(PickerGroup): rendering correctly when using v-for (#12732)

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

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: `
+      <picker-group :tabs="['Tab1', 'Tab2']">
+        <picker v-for="_ in 2" :columns="[{ text: '1', value: '1' }]" />
+      </picker-group>
+    `,
+  };
+
+  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);
+  });
+});

packages/vant/src/utils/basic.ts

@@ -81,3 +81,6 @@ export const isSameValue = (newValue: unknown, oldValue: unknown) =>
 
 export const toArray = <T>(item: T | T[]): T[] =>
   Array.isArray(item) ? item : [item];
+
+export const flat = <T>(arr: Array<T | T[]>) =>
+  arr.reduce<T[]>((acc, val) => acc.concat(val), []);