如何在数据表列中添加文本字段而不使用 vue.js 中的 <td>

Question

我正在使用 Vuetify 当前的CRUD Datatable UI 组件（与 Vue.js2 兼容）制作购物车，我正在尝试type="number"为两列添加一个文本字段，quantity并将price它们链接到它们各自的值以计算它们的总数。

在这里，您可以看到它如何添加、从 2 个静态值计算总计（我暂时使用计算函数来测试小计计算），并在以下代码中毫无问题地删除：

HTML：

<template>

  <v-layout align-start>

    <v-flex>

      <v-container grid-list-sm class="pa-4 white">

        <v-layout row wrap>

          <v-flex xs12 sm8 md8 lg8 xl8>

            <v-text-field v-model="code" label="Barcode" @keyup.enter="searchBarcode()">

            </v-text-field>

          </v-flex>

          <v-flex xs12 sm12 md12 lg12 xl12>

            <v-data-table 

              :headers="headerDetails" 

              :items="detailsWithSubTotal" 

              hide-default-footer 

              class="elevation-1"

            >

              <template v-slot:item.delete="{ item }">

                  <v-icon small class="ml-3" @click="deleteDetail(details, item)">

                      delete

                  </v-icon>

              </template>

              <template v-slot:no-data>

                <h3>There are no current products added on details.</h3>

              </template>

            </v-data-table>

          </v-flex>

        </v-layout>

      </v-container>

    </v-flex>

  </v-layout>

</template>

JAVASCRIPT：

<script>

import axios from 'axios'

export default {

  data() {

    return {

      headerDetails: [

        { text: 'Remove', value: 'delete', sortable: false },

        { text: 'Product', value: 'product', sortable: false },

        { text: 'Quantity', value: 'quantity', sortable: false },

        { text: 'Price', value: 'price', sortable: false },

        { text: 'Subtotal', value: 'subtotal', sortable: false }

      ],

      details: [],

      code: ''

    }

  },

  computed: {

    detailsWithSubTotal() {

      return this.details.map((detail) => ({

        ...detail,

        subtotal: detail.quantity * detail.price,

        source: detail

      }))

    }

  },

在我一直用作构建此购物车的参考的示例中，他没有显示来自 javascript 的数据，而是来自 HTML 的数据<td>，props.items正如您在下面的代码中看到的那样：

Answer 1

您只需要在表格标签中添加模板，就像您对删除图标所做的那样，您需要确保它的v-slot名称与您想要将文本字段放在其下的标题一样。<v-layout align-start>&nbsp; <v-flex>&nbsp; &nbsp; <v-container grid-list-sm class="pa-4 white">&nbsp; &nbsp; &nbsp; <v-layout row wrap>&nbsp; &nbsp; &nbsp; &nbsp; <v-flex xs12 sm8 md8 lg8 xl8>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-text-field v-model="code" label="Barcode" @keyup.enter="searchBarcode()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-text-field>&nbsp; &nbsp; &nbsp; &nbsp; </v-flex>&nbsp; &nbsp; &nbsp; &nbsp; <v-flex xs12 sm12 md12 lg12 xl12>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-data-table&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :headers="headerDetails"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :items="detailsWithSubTotal"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hide-default-footer&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="elevation-1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <template v-slot:item.delete="{ item }">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-icon small class="ml-3" @click="deleteDetail(details, item)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; delete&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-icon>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <template v-slot:item.quantity="{ item }">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-text-field v-model="item.quantity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-text-field>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <template v-slot:no-data>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>There are no current products added on details.</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-data-table>&nbsp; &nbsp; &nbsp; &nbsp; </v-flex>&nbsp; &nbsp; &nbsp; </v-layout>&nbsp; &nbsp; </v-container>&nbsp; </v-flex></v-layout>代码的结果如下所示：screenshot