vue3二次封装element-plus表格，slot透传，动态slot。

在一个组件中使用二次封装的表格组件，slot如何透传。

例如：有3个组件，C1，C2，Table，C1组件使用了C2组件，C2组件使用了Table，那么在C1组件中如何把slot透传到Table组件中。

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>其他内容</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": "创建时间",
            "prop": "createdtime",
          },
          {
            "label": "状态",
            "prop": "status",
            "slotName": 'status',
          }
    ]
  </script>

在C1组件中正常展示tag

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