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

Question

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

当然是复制和粘贴。
渲染行 - 但它会删除 v-data-table 行的默认函数（即：sortable）--> 我不选择
将 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">

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

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

Vuetify v-data-table render multiple v-edit-dialog

vue.js

vuetify.js