单击“新建”时 Vuetify 数据表 crud

Question

我使用带有 crud 选项的文档数据表中的示例。 如何更改“新建”点击功能？

v-slot:activator="{ on, attrs }" 是什么？

我需要使用 vuex dispatch 调用 api。 我希望在打开编辑对话框之前，将立即使用 api 内部的 ID 参数创建行。

我添加了@click，用于拨打电话。对吗？

<template>
  <v-data-table
    :headers="headers"
    :items="PIATConsignments"
    :footer-props="footerProps"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar
        flat
      >
        <v-toolbar-title>Items</v-toolbar-title>
        <v-divider
          class="mx-4"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <v-dialog
          v-model="dialogEdit"
          scrollable
          max-width="800px"
        >
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              color="primary"
              dark
              class="mb-2"
              v-bind="attrs"
              v-on="on"
              @click="newItem"
            >
              New
            </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="text-h5">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text style="height: 600px;">
              <v-container>
                <v-row>
                  <v-col
                    cols="12"
                    sm="12"
                    md="6"
                  >
                    <v-autocomplete
                      v-model="editedItem.DepartureCountryDetails"
                      :items="countries"
                      item-text="ShortCountryName"
                      label="Departure"
                      class="input-group--focused"
                      v-bind:readonly="isReadonly"
                      return-object
                    ></v-autocomplete>
                  </v-col>
                  
                  <v-col
                    cols="12"
                    sm="12"
                    md="6"
                  >
                    <v-autocomplete
                      v-model="editedItem.DestinationCountryDetails"
                      :items="countries"
                      item-text="ShortCountryName"
                      label="Destination"
                      class="input-group--focused"
                      v-bind:readonly="isReadonly"
                      return-object
                    ></v-autocomplete>
                  </v-col>
                </v-row>
                
                <v-row>
                  <v-col
                    cols="12"
                    sm="12"
                    md="6"
                  >
                    <v-text-field
                      v-model="editedItem.CAInvoiceValueAmount"
                      label="Amount"
                    ></v-text-field>
                  </v-col>
                  <v-col
                    cols="12"
                    sm="12"
                    md="6"
                  >
                    <v-text-field
                      v-model="editedItem.UnifiedGrossMassMeasure"
                      label="Weight"
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                color="blue darken-1"
                text
                @click="close"
              >
                Close
              </v-btn>
              <v-btn
                color="blue darken-1"
                text
                @click="save"
              >
                Save
              </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">Do you want to delete item?</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="closeDelete">Нет</v-btn>
              <v-btn color="blue darken-1" text @click="deleteItemConfirm">Да</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        mdi-pencil
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        mdi-delete
      </v-icon>
    </template>
  </v-data-table>
</template>

<script>
    import modelPIATConsignment from '@/models/form/consignment/piat/PIATConsignment'
    import DepartureCountryDetails from './DepartureCountryDetails.vue'
    
    export default {
        name: 'PIATConsignmentDetailsTable',
        components: {
            DepartureCountryDetails,
        },
        props: {
            consignmentForm: { Object },
        },
        data: function() {
            return {
                dialogEdit: false,
                dialogDelete: false,
                headers: [
                    { text: 'Departure', value: 'DepartureCountryDetails.ShortCountryName' },
                    { text: 'Destination', value: 'DestinationCountryDetails.ShortCountryName' },
                    { text: 'Amount', value: 'CAInvoiceValueAmount' },
                    { text: 'Weight', value: 'UnifiedGrossMassMeasure' },
                    { text: 'Actions', value: 'actions' },
                ],
                footerProps: {
                    'disable-items-per-page': true,
                    'items-per-page-options': [],
                    'items-per-page-all-text': '',
                },
                PIATConsignments: this.consignmentForm.PIATConsignmentDetails,
                editedIndex: -1,
                editedItem: modelPIATConsignment,
                defaultItem: modelPIATConsignment,
            }
        },
        computed: {
            formTitle () { return this.editedIndex === -1 ? 'New' : 'Edit' },
            countries() { return this.$store.getters['dict/countries'] },
        },
        watch: {
            dialogEdit (val) { val || this.close() },
            dialogDelete (val) { val || this.closeDelete() },
        },
        methods: {
            editItem (item) {
                this.editedIndex = this.PIATConsignments.indexOf(item)
                this.editedItem = Object.assign({}, item)
                this.dialogEdit = true
            },

            deleteItem (item) {
                this.editedIndex = this.PIATConsignments.indexOf(item)
                this.editedItem = Object.assign({}, item)
                this.dialogDelete = true
            },

            deleteItemConfirm () {
                this.PIATConsignments.splice(this.editedIndex, 1)
                this.closeDelete()
            },

            close () {
                this.dialogEdit = false
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem)
                    this.editedIndex = -1
                })
            },

            closeDelete () {
                this.dialogDelete = false
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem)
                    this.editedIndex = -1
                })
            },

            save () {
                if (this.editedIndex > -1) {
                    Object.assign(this.PIATConsignments[this.editedIndex], this.editedItem)
                }
                else {
                    this.PIATConsignments.push(this.editedItem)
                }
                
                this.close()
            },
        }
    }
</script>

Answer 1

经过一小时的尝试。 是的。在按钮上添加@click 事件是正确的方法。 在此之后只需要使用“当前”行数据进行操作。

methods: {
    ...
    newItem() {
        this.$store.dispatch('our-dispatch-method')
            .then(res => {
                res.id // For example we created element in our api and response is new ID.
                
                // Now push to the table item list editedItem and set the index
                this.PIATConsignments.push(this.editedItem)
                this.editedIndex = this.PIATConsignments.indexOf(this.editedItem)
                
                // Set your ID from api inside editedItem
                this.editedItem.id = res.id;
            })
    }
    ...
}