vue如何获取table中的某一行的数据
时间: 2023-08-09 10:06:09 浏览: 289
在 Vue 中,你可以使用事件处理函数来获取表格中某一行的数据。为了获取某一行的数据,你需要在行上绑定一个事件处理函数,当该行被点击时触发该函数。在事件处理函数中,你可以使用 `event.target` 来获取被点击的元素,然后使用 `closest` 方法来找到最近的 `tr` 元素,最后从该元素中获取数据。下面是一个示例代码:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people" :key="person.id" @click="showPerson(person)">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.location }}</td>
</tr>
</tbody>
</table>
<p v-if="selectedPerson">Selected person: {{ selectedPerson.name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
people: [
{ id: 1, name: 'Alice', age: 25, location: 'New York' },
{ id: 2, name: 'Bob', age: 30, location: 'Los Angeles' },
{ id: 3, name: 'Charlie', age: 35, location: 'Chicago' }
],
selectedPerson: null
};
},
methods: {
showPerson(person) {
this.selectedPerson = person;
}
}
};
</script>
```
在这个示例中,我们在每一行上绑定了一个 `click` 事件处理函数 `showPerson`,当用户点击某一行时,该函数会将被点击的人的对象存储在 `selectedPerson` 数据属性中,并在模板中显示该人的名字。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)