Vuetify Datatable -对所有列启用内容编辑

xj3cbfub  于 2023-01-26  发布在  Vue.js
关注(0)|答案(2)|浏览(123)

我有一个有数百列(和行)的数据表,我希望它们都是可编辑的。https://vuetifyjs.com/en/components/data-tables上的Vuetify示例(section:content editing)显示了使单元格可编辑的可能性。然而,手动为数百列这样做是不可能的。有没有办法使所有单元格默认为可编辑的?

zwghvu4y

zwghvu4y1#

当然,没有办法让 all header字段在默认情况下可编辑,但是你可以自定义body模板,并使用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

daolsyd0

daolsyd02#

我只是通过迭代v槽模板中的头来解决这个问题:

<template
          v-for="h in headers"
          v-slot:[`item.${h.value}`]="props"
        >
          <v-edit-dialog
            :key="h.value"
            :return-value.sync="props.item[h.value]"
          >
            {{ props.item[h.value] }}
            <template v-slot:input>
              <v-text-field
                v-model="props.item[h.value]"
                label="Edit"
                single-line
              ></v-text-field>
            </template>
          </v-edit-dialog>
        </template>

这是一个Codeply

相关问题