如何在数据表列中添加文本字段而不使用 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>

  <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:item.quantity="{ item }">

              <v-text-field v-model="item.quantity">

                

              </v-text-field>

            </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>

代码的结果如下所示：screenshot