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

Question

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

我当前的代码很简单，它的 sn-p 看起来像这样。

编辑：我正在使用官方 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>

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

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 会覆盖它。修改这个 prop 以获得想要的结果。

<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