在一個(gè)組件中使用二次封裝的表格組件，slot如何透?jìng)鳌?/h2>

例如：有3個(gè)組件，C1，C2，Table，C1組件使用了C2組件，C2組件使用了Table，那么在C1組件中如何把slot透?jìng)鞯絋able組件中。

Table組件 Table.vue 在main.js 配置全局組件。

    <template>
      <el-table v-bind="$attrs">
         <template v-for="column in $attrs.columns">
          <el-table-column v-if="column.slotName" :key="column.prop" v-bind="column">
            <template #default="scope">
                <slot :name="column.slotName" v-bind="scope"></slot>
            </template>
          </el-table-column>
          <el-table-column v-else :key="column.prop" v-bind="column" />
        </template>
      </el-table>
     </template>
     
     <script setup></script>

C2組件 C2.vue

    <template>
        <el-card>其他內(nèi)容</el-card>
        <el-card>
            <Table v-bind="$attrs">
              <template
                  v-for="column in $attrs.columns.filter(i => i.slotName)" 
                  :key="column.slotName" 
                  #[column.slotName]="scope">
                <slot :name="column.slotName" v-bind="scope" />
              </template>
             </Table>
        </el-card>
    </template>
    
    <script lang="ts" setup></script>

C1組件 C1.vue

    <template>
      <C2 :columns="tableColumns" :data="tableData">
         <template #status="{row}">
             <div>
               <el-tag type="success">{{ row.status }}</el-tag>
             </div>
         </template>
      </C2>
    </template>
    
    <script lang="ts" setup>
      import { ref } from "vue";

      const tableData = ref<Array<any>>([
       {id: 1, name: "JY-SZ-2023", createdtime: "2023-12-31", status: "正常"},
       {id: 2, name: "VC890D", createdtime: "2024-06-30", status: "正常"}
    ])
      const tableColumns = [
          {
            "label": "ID",
            "prop": "id",
          },
          {
            "label": "名稱",
            "prop": "name",
          },
          {
            "label": "創(chuàng)建時(shí)間",
            "prop": "createdtime",
          },
          {
            "label": "狀態(tài)",
            "prop": "status",
            "slotName": 'status',
          }
    ]
  </script>

在C1組件中正常展示tag

2CF96E3D-D005-4ebd-9C89-2B285355C1DB_在C1組件中正常展示tag.png