Vuetify 数据表 - 在所有列上启用内容编辑 [英] Vuetify Datatable - Enable content editing on all columns

问题描述

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

I have a datatable with hundreds of columns (and rows) and I want all of them to be edittable. The Vuetify example on https://vuetifyjs.com/en/components/data-tables (section:content editing ) shows the possibilty of making cells editable. However, doing this for hundreds of column manually is out of the question. Is there a way to make all cells editable by default?

推荐答案

AFAIK，默认情况下无法使 所有 标题字段可编辑，但您可以自定义主体模板，并动态呈现数据使用 v-for 和 v-edit-dialog 为每个项目.例如...

AFAIK, there's no way to make all header fields editable by default, but you could customize the body template, and dynamically render the data using v-for and the v-edit-dialog for each item. For example...

           <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

这篇关于Vuetify 数据表 - 在所有列上启用内容编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！