单击时如何在数据 table 中获取特定数据值 - VueJS？

Question

我有一个 v-data-table，其中包含一些通用员工数据。我想知道我是否可以获得我点击的确切值。

我当前的代码很简单，其中的一个片段如下所示。

编辑：我正在使用官方 vuetify 文档中的 CRUD-Actions 示例：https://vuetifyjs.com/en/components/data-tables/

<v-data-table 
    :headers="headers" 
    :items="rows" 
    item-key="name" 
    :search="search" >

    <template v-slot:top>
        <!-- A dailog box is present here to edit the rows-->                   
    </template>

    <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
            mdi-pencil
        </v-icon>
    </template>

</v-data-table>

另外，是否可以获取其列名？（上面代码中的headers）谢谢！

Answer 1

根据 v-data-table https://vuetifyjs.com/en/components/data-tables/ 的文档，您可以使用物品栏：

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >    
    <template v-slot:item="props">
       <tr>      
          <td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])">{{props.item[key]}}</td>
       </tr>
    </template>
</v-data-table>

并获得物品：

methods:{
  onClickItem(columName, value) {
     console.log(columName, value)
  },
}

更新

如果您想添加另一列，如操作，请不要使用 v-slot:item.actions 插槽，因为 v-slot:item will 会覆盖它。修改此道具以获得所需的结果。

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >    
    <template v-slot:item="props">
     <tr>
      <td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])">{{props.item[key]}}</td>

      <!-- This is for actions -->
      <td>
        <v-icon small class="mr-2" @click="editItem(item)">
          mdi-pencil
        </v-icon>
        <v-icon small @click="deleteItem(item)">
          mdi-delete
        </v-icon>
      </td>
     </tr>
    </template>
</v-data-table>

检查此代码笔：https://codepen.io/hans-felix/pen/bGVzoOj

单击时如何在数据 table 中获取特定数据值 - VueJS？

How to get a specific data value in a data table when clicked - VueJS?

javascript

vue.js

vuejs2

vuetify.js

vuejs3