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

推荐答案

好吧,默认情况下,没有办法使all个标题字段可编辑,但您可以自定义主体模板,并使用v-for和v-edit-dialog for each 项目动态呈现数据.例如...

           <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

Vue.js相关问答推荐

检测Vue3/Vue-test-utils中的Vuex还原/Mutations

如何以惯用的方式触发 vue3 中同级组件的效果?

在 Vue 中,如何使用 npm run build 将 .htaccess 包含到生产环境中?

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

在基于 TypeScript 的 Vue 中将 vuex 状态和Mutations绑定到复选框组件属性

Vue.js 从模板中分离样式

如何在某些异步数据(在 Vuex 存储中)加载之前防止任何路由?

更新 vue.js 中的数据属性/对象

Vue路由保持活动和挂载行为

VueJS 使用 prop 作为数据属性值

Javascript/vue.js 接收json

未捕获的类型错误:c.querySelectorAll 不是函数

我可以避免使用 Vue.js 组件的重复样式吗?

触发子函数

从 vue.js 中的 store 获得的计算(computed)属性的设置器

使用 nuxt,如何将路由名称放在页面标题中?

'vue' 未被识别为内部或外部命令

vue-cli-service build --target lib 导入为 lib 时丢失图像路径

在 Vue 应用程序中创建一个类的单个实例

居中 v-toolbar-title