如何在Vuetify中用Dialog连接表记录

<template>
  <v-app>
    <v-data-table
      :headers="headers"
      :items="items"
      item-key="id"
      class="elevation-1"
    >
      <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="openDialog(item)">mdi-pencil</v-icon>
      </template>
    </v-data-table>

    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          <span class="headline">{{ selectedRecord.name }}</span>
        </v-card-title>
        <v-card-text>
          <v-form>
            <v-text-field v-model="selectedRecord.name" label="Name"></v-text-field>
            <v-text-field v-model="selectedRecord.email" label="Email"></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn color="primary" @click="saveChanges">Save</v-btn>
          <v-btn color="secondary" @click="closeDialog">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Email', value: 'email' },
        { text: 'Actions', value: 'actions', sortable: false },
      ],
      items: [
        { id: 1, name: 'John Doe', email: 'john@example.com' },
        { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
      ],
      dialog: false,
      selectedRecord: {},
    };
  },
  methods: {
    openDialog(item) {
      this.selectedRecord = { ...item };
      this.dialog = true;
    },
    saveChanges() {
      // Perform save operation here
      this.closeDialog();
    },
    closeDialog() {
      this.dialog = false;
    },
  },
};
</script>