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

我有一个

v-data-table

，其中包含一些通用的员工数据。我想知道我是否能得到我点击的准确值

我当前的代码很简单&它的一个片段如下所示

编辑：我正在使用vuetify官方文档中的CRUD操作示例：

mdi铅笔

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

---

谢谢

根据

v-data-table

的文档，您可以使用项目槽：

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

更新

如果要添加另一列，如操作，请不要使用

v-slot:item.actions

slot，因为

v-slot:item将覆盖它。修改此道具以获得所需的结果

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


{{props.item[key]}
mdi铅笔
mdi删除

检查此代码笔：
嘿，我切换到CRUD actions v-data-table？您能指导我如何将上述代码与之集成吗？我对上述问题作了一些修改。请看一看
methods:{
  onClickItem(columName, value) {
     console.log(columName, value)
  },
}

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