Vuetify v-data-table 渲染多个 v-edit-dialog

Question

文档有 example 用于将内联编辑对话框添加到列。我正在尝试将其添加到每一列。

1. 当然是复制粘贴。
2. 渲染行 - 但它会删除 v-data-table 行的默认功能（即：可排序） --> 我不选择
3. 将 v-for 与 v-slot 一起使用 - 但有错误 demo

<template v-for="header in headers" v-slot:item[header.value]="propsAPI">
  <v-edit-dialog
    :return-value.sync="propsAPI.item[header.value]"
    @save="save"
    @cancel="cancel"
    @open="open"
    @close="close"
    :key="header.value"
  >
    {{ propsAPI.item[header.value] }}
    <template v-slot:input>
      <v-text-field
        v-model="propsAPI.item[header.value]"
        :rules="[max25chars]"
        label="Edit"
        single-line
        counter
      />
    </template>
  </v-edit-dialog>
</template>

任何建议

Answer 1

你可以替换

<template v-for="header in headers" v-slot:item[header.value]="propsAPI">

与

<template v-for="header in headers" v-slot:[`item.${header.value}`]="propsAPI">

这应该为每一列重新定义槽。