vue

在一个组件中使用二次封装的表格组件，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

在C1组件中正常展示tag