[英]How to get a specific data value in a data table when clicked - VueJS?
I have a v-data-table
that has some generic employee data.我有一个包含一些通用员工数据的
v-data-table
。 I wanted to know if I could get the exact value which I clicked on.我想知道我是否可以获得我点击的确切值。
My current code is simple & a snippet of it looks like this.我当前的代码很简单,其中的一个片段看起来像这样。
EDIT: I am utilizing the CRUD-Actions Example from the official vuetify documentation: https://vuetifyjs.com/en/components/data-tables/编辑:我正在使用官方 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>
Also, is it possible to get its column name?另外,是否可以获取其列名? (headers in the above code) Thanks!
(上面代码中的标题)谢谢!
Acording to documentation of v-data-table
https://vuetifyjs.com/en/components/data-tables/ you can use the item slot:根据
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>
And get the item:并获取项目:
methods:{
onClickItem(columName, value) {
console.log(columName, value)
},
}
UPDATE更新
If you are want to add another column like actions, not use v-slot:item.actions
slot, because v-slot:item will
override it.如果您想添加另一列类似操作,请不要使用
v-slot:item.actions
插槽,因为v-slot:item will
覆盖它。 Modify this prop to get the desired result.修改此道具以获得所需的结果。
<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>
Check this codepen: https://codepen.io/hans-felix/pen/bGVzoOj检查此代码笔: https://codepen.io/hans-felix/pen/bGVzoOj
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.