fix(tab): 多循环嵌套导致 lay-tab-item 的 props 拿不到

docs/docs/zh-CN/components/tab.md

@@ -79,7 +79,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-tab type="card" v-model="current3" :allow-close="allowClose" @change="change" @close="close">
+  <lay-tab type="card" v-model="current4" :allow-close="allowClose" @change="change" @close="close">
     <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
     <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
   </lay-tab>
@@ -103,7 +103,7 @@ export default {
     }
 
     return {
-      current3,
+      current4,
       allowClose,
       change,
       close
@@ -114,6 +114,40 @@ export default {
 
 :::
 
+
+::: demo
+
+<template>
+  <lay-tab type="card" v-model="current5">
+    <lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id">
+      {{a}}
+    </lay-tab-item>
+  </lay-tab>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const current5 = ref('1')
+
+    const arr = [
+      {id:'1', title:'选项一'},
+      {id:'2', title:'选项二'}
+    ]
+
+    return {
+      current5,
+      arr
+    }
+  }
+}
+</script>
+
+:::
+
 ::: field tab attributes
 
 :::

src/module/tab/index.vue

@@ -2,16 +2,16 @@
   <div class="layui-tab" :class="[type ? 'layui-tab-' + type : '']">
     <ul class="layui-tab-title">
       <li
-        v-for="s in slots"
+        v-for="children in childrens"
-        :key="s"
+        :key="children"
-        :class="[s.props.id === active ? 'layui-this' : '']"
+        :class="[children.props.id === active ? 'layui-this' : '']"
-        @click.stop="change(s.props.id)"
+        @click.stop="change(children.props.id)"
       >
-        {{ s.props.title }}
+        {{ children.props.title }}
         <i
           v-if="allowClose"
           class="layui-icon layui-icon-close layui-unselect layui-tab-close"
-          @click.stop="close(s.props.id)"
+          @click.stop="close(children.props.id)"
         ></i>
       </li>
     </ul>
@@ -28,10 +28,34 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, defineProps, provide, ref, useSlots } from 'vue'
+import tabItem from "../tabItem/index.vue"
+import {
+  Component,
+  computed,
+  defineProps,
+  provide,
+  Ref,
+  ref,
+  useSlots,
+  VNode
+} from 'vue'
 
 const slot = useSlots()
 const slots = slot.default && slot.default()
+const childrens: Ref<VNode[]> = ref([])
+
+const setItemInstanceBySlot = function (nodeList: VNode[]) {
+  nodeList?.map((item) => {
+    let component = item.type as Component
+    if (component.name != tabItem.name) {
+      setItemInstanceBySlot(item.children as VNode[])
+    } else {
+      childrens.value.push(item)
+    }
+  })
+}
+
+setItemInstanceBySlot(slots as any[])
 
 const props = defineProps<{
   type?: string