Чтобы правильно отобразить дочерние слоты в родительском компоненте, который, в вашем случае, будет таблицей с двумя колонками, вы можете воспользоваться функциональностью Vue.js для работы с слотами. Давайте рассмотрим, как можно реализовать компоненты `TableCustom` и `TableCol`, чтобы корректно отображать заголовки и тела в вашей таблице.
Вот пример реализации компонента `TableCustom` и `TableCol`, который использует слоты:
```vue
<!-- TableCustom.vue -->
<template>
<table>
<thead>
<tr>
<th v-for="(col, index) in columns" :key="index" :style="{ width: col.width }">
<slot :name="`header-${col.prop}`" />
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in data" :key="rowIndex">
<td v-for="(col, colIndex) in columns" :key="colIndex">
<slot :name="`body-${col.prop}`" :scope="{ row }" />
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: {
data: {
type: Array,
required: true
}
},
computed: {
columns() {
return this.$slots.default().map(slot => {
return { prop: slot.props.prop, width: slot.props.width };
});
}
}
}
</script>
```
```vue
<!-- TableCol.vue -->
<template>
<div style="display: none;">
<slot></slot>
</div>
</template>
<script>
export default {
props: {
prop: {
type: String,
required: true
},
label: {
type: String,
required: true
},
width: {
type: String,
required: false
}
}
}
</script>
```
Здесь `TableCustom` является родительским компонентом, который получает массив данных через пропс `data`. Он использует слоты, чтобы отобразить пользовательски определенные заголовки и тела ячеек. Мы определяем `header` и `body` слоты с помощью шаблонов с именами на основе `prop` из `TableCol`.
Теперь вы можете использовать компоненты `TableCustom` и `TableCol` следующим образом:
```vue
<template>
<TableCustom :data="data">
<TableCol prop="age" label="Возраст" width="150">
<template #header>
<div>Это заголовок для возраста</div>
</template>
<template #body="{ row }">
<div>Возраст: {{ row.age }}</div>
</template>
</TableCol>
<TableCol prop="name" label="Имя" width="200">
<template #header>
<div>Это заголовок для имени</div>
</template>
<template #body="{ row }">
<div>Имя: {{ row.name }}</div>
</template>
</TableCol>
</TableCustom>
</template>
<script>
export default {
data() {
return {
data: [
{ age: 25, name: 'John' },
{ age: 30, name: 'Jane' },
// больше данных...
]
};
}
}
</script>
```
Теперь, когда вы используете компонент `TableCustom`, он будет корректно отображать заголовки и тела в таблице, используя заданные слоты для каждого столбца. Каждый столбец будет захватывать свои слоты заголовков и тел, передавая нужные данные в соответствующие шаблоны.