Javascript 使vue插槽结构类似于材质ui

这是我目前的代码：

<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>

{{item[header.value]}

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

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

{{formatAge（item.age）}

---

我如何实现这样的命名槽，它们将其视为对象？

我认为类似的方法应该可以工作：

<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>

{{item[header.value]}

然后，要覆盖默认插槽值：

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

{{formatAge（item.age）}

我认为这样做应该有效：

<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>

{{item[header.value]}

然后，要覆盖默认插槽值：

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

{{formatAge（item.age）}

您的答案是正确的，但我将

：name=“header.value”

更改为

：name=“`item.${header.value}`”

。我只是感到困惑，因为我希望有一个空白的数据，因为你必须有一个插槽来显示数据，但它会返回到

item[header.value]

，现在我想起来了，这个插槽的任何子项都是回退。你的答案是对的，但我将

：name=“header.value”

更改为

：name=“`item.${header.value}”

。我只是感到困惑，因为我希望有一个空白数据，因为必须有一个插槽才能显示数据，但它会返回到

item[header.value]

无需担心，现在我想，插槽的任何子项都是后备项