Vuetify Datatable - 在所有列上启用内容编辑答案

【问题标题】：Vuetify Datatable - Enable content editing on all columnsVuetify Datatable - 在所有列上启用内容编辑
【发布时间】：2020-01-23 07:43:05
【问题描述】：

我有一个包含数百列（和行）的数据表，我希望所有这些都是可编辑的。 https://vuetifyjs.com/en/components/data-tables 上的 Vuetify 示例（部分：内容编辑）显示了使单元格可编辑的可能性。但是，手动为数百列执行此操作是不可能的。有没有办法让所有单元格默认可编辑？

【问题讨论】：

可以像示例中一样单独编辑。
实际任务是制作一个类似于 Excel 工作表的表格，允许选择、复制和粘贴多个单元格。作为第一步，拥有可单独编辑的单元格就足够了。
是的。所有单元格都需要在整个表格中可编辑。根据 vuetify 示例，只有如下定义的列是可编辑的。

标签： vue.js datatable vuetify.js

【解决方案1】：

AFAIK，默认情况下无法使 all 标头字段可编辑，但您可以自定义正文模板，并使用 v-for 和 v-edit-dialog 动态呈现数据物品。比如……

           <template v-slot:body="{ items, headers }">
                <tbody>
                    <tr v-for="(item,idx,k) in items" :key="idx">
                        <td v-for="(header,key) in headers" :key="key">
                            <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]"
                                  label="Edit"
                                  single-line
                                ></v-text-field>
                              </template>
                            </v-edit-dialog>
                        </td>
                    </tr>
                </tbody>
            </template>

Codeply

【讨论】：

非常感谢。正是我想要的。