gpt4 book ai didi

vue.js - Vuetify Datatable-在所有列上启用内容编辑

转载 作者:行者123 更新时间:2023-12-03 06:36:50 32 4
gpt4 key购买 nike

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

最佳答案

AFAIK,默认情况下无法使所有标题字段都可编辑,但是您可以自定义主体模板,并使用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

关于vue.js - Vuetify Datatable-在所有列上启用内容编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59873652/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com