javascript - 制作类似于material ui的vue slot结构

Question

到目前为止，这是我的代码：

<tr :key="index" v-for="(item, index) in items">
  <td v-for="header in headers" :key="header.value">
    {{ item[header.value] }}
  </td>
  <td>
    <slot name="actions" v-bind:item="data[index]"></slot>
  </td>
</tr>

我想要的是拥有并覆盖类似于材质ui的表列槽，如下所示：

<template v-slot:item.age="{item}">
  <div> {{formatAge(item.age)}} </div>
</template>

我如何实现命名插槽，就像他们将其视为对象一样？

Answer 1

我认为这样的事情应该有效：

<tr :key="index" v-for="(item, index) in items">
  <td v-for="header in headers" :key="header.value">
    <slot :name="header.value" v-bind:item="item">
      {{ item[header.value] }}
    </slot>
  </td>
  <td>
    <slot name="actions" v-bind:item="data[index]"></slot>
  </td>
</tr>

然后，覆盖默认插槽值：

<template v-slot:age="{item}">
  <div> {{formatAge(item.age)}} </div>
</template>