如何使用实时数据自动更新 Vue.js 表中的行？

Question

当然，这是翻译：

你好，我有一个问题。我想构建一个类似于 Excel 的简单编辑器，它的功能应该像 Excel 一样。每当单元格值发生更改时，数据应自动保存在数据库中。目前，我已将其设置为当我编辑单元格时，我必须单击“保存”按钮才能在数据库中更新值。我是新来的。我希望你能帮助我，谢谢🙏这是代码，它不是完整的代码，但我希望它有帮助：

<div>
  <v-toolbar>
    <v-dialog>
      <template #activator="{ on, attrs }">
        <v-btn
          color="orange"
          dark
          depressed
          :loading="exportCSVLoader"
          class="mb-2 mx-2"
          @click="exportCSV"
        >
          Expotieren
        </v-btn>
        <ImportCSV
          :import-c-s-v-loader="importCSVLoader"
          @csv-data="getImportFileData"
        />

        <v-btn
          color="primary"
          dark
          depressed
          class="mb-2"
          v-bind="attrs"
          v-on="on"
        >
          Neues hinzufügen
        </v-btn>
        <v-btn
          dark
          color="red"
          :loading="deleteButtonLoader"
          depressed
          class="mb-2 mx-1"
          @click="deleteItem(deleteItemRow)"
        >
          Löschen
        </v-btn>
        <v-btn
          color="blue"
          dark
          :loading="saveButtonLoader"
          depressed
          class="mb-2 mx-1"
          @click="SaveExcelRecord(editedRow)"
        >
          Speichern
        </v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="text-h5">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-container>
            <HouseTextFields :edited-item="editedItem" @clear="close" />
          </v-container>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="close"> Abrechen </v-btn>
          <v-btn
            :loading="saveButtonLoader"
            color="blue darken-1"
            text
            @click="save"
          >
            {{ editedItem?.id ? 'Update' : 'Speichern' }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="dialogDelete" max-width="500px">
      <v-card>
        <v-card-title class="text-h5"
          >Bist du sicher diese Zeile zu löschen?</v-card-title
        >
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="closeDelete"
            >Abrechen</v-btn
          >
          <v-btn
            color="blue darken-1"
            text
            :loading="deleteButtonLoader"
            @click="deleteItemConfirm"
            >OK</v-btn
          >
          <v-spacer></v-spacer>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-toolbar>
  <v-divider></v-divider>
</div>
<vue-excel-editor
  ref="grid"
  v-model="dataItem"
  :new-if-bottom="false"
  :allow-add-col="true"
  :no-header-edit="true"
  width="100%"
  :localized-label="myLabels"
  filter-row
  @cell-click="onRowDataChange"
  @update="updateRow"
  @select="rowSelected"
>
  ...
</vue-excel-editor>

methods: {
  updateRow(val) {
    if (val && val.length > 0) {
      let arr = []

      val.forEach(row => {
        if (this.dataItem?.length) {
          this.dataItem.find(el => {
            if (el.$id === row.$id) {
              // delete $id.
              delete el['$id']

              // Change date format
              if (el.builddate)
                el.builddate = moment(el.builddate).format('YYYY-MM-DD')
              if (el.lastrenovation)
                el.lastrenovation = moment(el.lastrenovation).format(
                  'YYYY-MM-DD'
                )

              if (el.created_at)
                el.created_at = moment(el.created_at).format('YYYY-MM-DD')

              if (el.updated_at)
                el.updated_at = moment(el.updated_at).format('YYYY-MM-DD')

              // Push in array
              arr.push(el)
            }
          })
        }
      })

      console.log('row', arr)
      this.editedRow.data = [...arr]
    }
  },

  async SaveExcelRecord() {
    if (!this.editedRow.data || this.editedRow.data.length === 0) {
      // this.initToast("Nothing to save.", "info");
      return 'no data'
    }

    this.saveButtonLoader = true

    try {
      // Assuming that the API supports batch update
      await axios.post(
        `http://127.0.0.1:8000/api/JsonBulk`,
        this.editedRow.data
      )
      this.initToast('Daten wurden aktualisiert und gespeichert!', 'success')

      // reset
      this.editedRow = {
        index: -1,
        data: []
      }

      // load all records
      this.getHouseRecords()

      this.close()
    } catch (error) {
      this.initToast('Daten konnten nicht aktualisiert werden', 'error')
    } finally {
      this.saveButtonLoader = false
    }
  }
}

Answer 1

@Maria 为了确保系统即使在处理非常大的数据集时也能保持快速和响应，您必须将数据呈现为虚拟化列表。因此，在这种情况下，当用户滚动列表时，每个项目都会即时呈现。

Vuetify 有一个用于此目的的组件 https://vuetifyjs.com/en/components/virtual-scroller/