vue.js - Vuetify v-data 表获取索引

Question

嘿，我是 vue js 和 vuetify 的新手。在我的 editProductSave 中，我想传递另一个变量，它是表中行的索引。这是我当前的代码，我将如何实现？该表是使用 vuetify v-data-table 绘制的

整个代码

 <template>
      <v-card>
        <v-data-table
          :headers="tableFields"
          :items="programs"
          :items-per-page="5">
                <template v-slot:[`item._id.$oid`]="{ item }">
                  {{item._id.$oid}}
                </template>
                <template v-slot:[`item.tags`]="props">
                <v-edit-dialog
                  :return-value.sync="props.item.tags"
                  large
                  persistent
                  @save="editProductSave(props.item)">
                  <div>{{props.item.tags.length === 0 ? '' : props.item.tags}}</div>
                  <template v-slot:input>
                    <div class="mt-1 text-h2">
                      Update Tag
                    </div>
                    <v-text-field
                      v-model="props.item.tags"
                      label="Edit"
                      single-line
                      counter
                      autofocus
                    ></v-text-field>
                  </template>
                </v-edit-dialog>
                </template>

<script>
 import tdmApi from "../services/api/Database";

  export default {
    props: ["DatabaseList"],
    computed: {
      totalRows() {
        return this.programs.length;
      },
    },
    created () {
      this.viewTdmDatabase();
    },
    data () {
      return {
        tableFields: [
          {text:'ID',value:'_id.$oid'},
          {text:'Tag',value:'tags'},
        ],
        programs: [],
      }
    },
</script>

Answer 1

<template v-slot:item.tags="{item,index}">
         {{index}} //Output index
</template>

上面的代码应该可以工作，确保用对象覆盖它。

Answer 2

您可以简单地将索引添加到计算属性中的程序并将其导入数据表中，如下所示：

模板

...
<v-data-table
      :headers="tableFields"
      :items="programsComputed"
...

脚本

  export default {
    ...
    computed: {
      totalRows() {
        return this.programs.length;
      },
      programsComputed () {
        return this.programs.map((program, index) => {
          program.index = index;
          return program;
        })
      }
    },
    ...
    data () {
      return {
        tableFields: [
          {text:'ID',value:'_id.$oid'},
          {text:'Tag',value:'tags'},
        ],
        programs: [],
      }
    },

在你的editProductSave(item)你只需要打电话item.index

Answer 3

vuetify 似乎在v-data-table api 中没有索引字段，因此为了获得它，您可以更改 v-data-table 的结构。

这是一个如何获取每行索引的示例。

https://www.codegrepper.com/code-examples/whatever/vuetify+v-data-table+get+row+index

Answer 4

试试下面的代码：

     <template v-slot:[`item.tags`]="{props, index}">
                <v-edit-dialog
                  :return-value.sync="props.item.tags"
                  large persistent
                  @save="editProductSave(props.item, index)">
                // ...
                </v-edit-dialog>
    </template>

在脚本中，方法是

methods: {
     editProductSave(item, index) {
        // ...
     }
}