Vuetify v-data 表获取索引答案

【问题标题】：Vuetify v-data table get IndexVuetify v-data 表获取索引
【发布时间】：2021-08-30 03:17:21
【问题描述】：

嘿，我是 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>

【问题讨论】：

行索引在哪里？
您使用的是哪个插槽？请分享整个代码
@BeshambherChaukhwan 我是 vue js 的新手，我正在使用 v-data-table 绘制表格
@BoussadjraBrahim 添加了整个代码

标签： vue.js vuetify.js v-data-table

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试下面的代码：

     <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) {
        // ...
     }
}

【讨论】：

它没有在表格中呈现我的数据
<template v-slot:[item.tags]="props,index"> 绘制我的表格但索引值未定义
看看这是否有帮助stackoverflow.com/questions/62031595/…

【解决方案3】：

the v-data-table api the index field中好像没有vuetify，所以为了得到它你可以改变v-data-table的结构。

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

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

【讨论】：

【解决方案4】：

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

模板

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

【讨论】：