Vuetify v-data 表获取索引

Posted 2023-02-22

【中文标题】Vuetify v-data 表获取索引

【英文标题】：Vuetify v-data table get Index

【发布时间】：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 添加了整个代码

【参考方案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"> 绘制我的表格但索引值未定义

看看这是否有帮助***.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