Как отрисовать дочерние slots в родительском компоненте?

Question

[Masthead]

Необходимо создать два компонента - таблицу и её колонку:

<TableCustom :data="data">
    <TableCol prop="age" label="Возраст" width="150">
      <template #header>
        <div>Это заголовок для возраста</div>
      </template>
      <template #body="scope">
        <div>Возраст: {{ scope.row.name }}</div>
      </template>
    </TableCol>

    <TableCol prop="name" label="Имя" width="200">
      <template #header>
      </template>
      <template #body="scope">
        <div>имя {{ scope.row.name }}</div>
      </template>
    </TableCol>
  </TableCustom>

Есть таблица, в неё передается, к примеру, data (какой-то массив с данными).
Также передаются 2 колонки. В соответствии со слотами (хедер или дефолт) должна идти отрисовка в хедере/боди:

<TableCol prop="name" label="Имя" width="200">
      <template #header>
        <div>Имя</div>
      </template>
      <template #body="{ scope }">
        <div>Имя: {{ scope.name }}</div>
      </template>
    </TableCol>

Проблема заключается в том, что при доставании слотов, в объекте children - есть эти "слоты" с передаваемыми именами. Но как их заставить рисоваться в шаблоне?

Answer 1

[0xD34F]

Вот так:

import { useSlots, computed } from 'vue';

const slots = useSlots();
const columns = computed(() => slots.default?.().filter(n => n.props));

<table>
  <thead>
    <tr>
      <th v-for="{ props: p, children: c } in columns" :key="p.prop">
        <component v-if="c?.header" :is="c.header" />
        <template v-else>{{ p.label }}</template>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in data">
      <td v-for="{ props: p, children: c } in columns" :key="p.prop">
        <component v-if="c?.body" :is="c.body" :row="row" />
        <template v-else>{{ row[p.prop] }}</template>
      </td>
    </tr>
  </tbody>
</table>

Comments

[Masthead]

Спасибо большущее!