Vuetify v-data-table如何给每列批量渲染v-edit-dialog实现行内编辑

核心问题说明 #

你第三种方案报错的根本原因是动态插槽语法不符合Vue规范，调整后即可直接使用，不需要放弃v-data-table的原生排序等能力，也不需要逐列复制重复代码。

修正后可运行的实现（推荐） #

调整动态插槽的写法，将列字段名拼接为item.xxx格式的动态插槽名即可，代码如下：

<v-data-table
  :headers="headers"
  :items="desserts"
  :items-per-page="5"
>
  <template 
    v-for="header in headers" 
    v-slot:[`item.${header.value}`]="{ item }"
    :key="header.value"
    <!-- 不需要编辑的列可在headers中加editable字段，加v-if="header.editable"过滤 -->
  >
    <v-edit-dialog
      :return-value.sync="item[header.value]"
      @save="save"
      @cancel="cancel"
      @open="open"
      @close="close"
    >
      {{ item[header.value] }}
      <template v-slot:input>
        <v-text-field
          v-model="item[header.value]"
          :rules="[max25chars]"
          label="Edit"
          single-line
          counter
        />
      </template>
    </v-edit-dialog>
  </template>
</v-data-table>

扩展适配 #

如果不同列需要不同的输入组件（比如数字列用数字输入框、日期列用日期选择器），只需要在headers配置中新增component字段指定对应组件，插槽内根据配置动态渲染即可。

替代方案：轻量无弹窗行内编辑 #

如果不需要弹窗交互，可以直接在单元格内切换编辑状态：

1. 给每条数据新增临时字段editingColumn，记录当前正在编辑的列标识
2. 单元格点击时将editingColumn设置为当前列的value值
3. 单元格内根据当前列是否处于编辑状态，切换展示文本或输入框，输入完成后触发保存逻辑清空编辑状态即可。

内容的提问来源于stack exchange，提问作者Tan Nguyen