The docs has example for adding inline edit dialog to a column. I'm trying to add it to each column.

1. Copy & Paste of course.
2. Rendering row - But it will remove default function (i.e: sortable) of v-data-table row --> I don't choose
3. Using v-for with v-slot - But has error 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>

Any suggestion

CodePudding user response：

You can replace

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

with

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

This should redefine slot for each column.