在一个组件中使用二次封装的表格组件,slot如何透传。
例如:有3个组件,C1,C2,Table,C1组件使用了C2组件,C2组件使用了Table,那么在C1组件中如何把slot透传到Table组件中。
Table组件 Table.vue
在main.js 配置全局组件。
html
<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
html
<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
html
<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
