使 vue 插槽结构类似于 material ui

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>

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

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

使 vue 插槽结构类似于 material ui

Make vue slot structure similar to material ui

javascript

vue.js

material-ui

vue-slot