vue中点击每行,拿到每行的数据
时间: 2024-01-21 11:19:26 浏览: 21
在Vue中,你可以使用v-for指令遍历每一行数据,并为每一行添加一个点击事件。当点击某一行时,你可以使用事件处理程序来获取该行的数据。
以下是一个简单的示例,演示如何在Vue中获取每行数据:
HTML模板:
```
<template>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(person, index) in persons" :key="index" @click="getRowData(person)">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.gender }}</td>
</tr>
</tbody>
</table>
</div>
</template>
```
Vue组件:
```
<script>
export default {
data() {
return {
persons: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' },
{ name: '赵六', age: 35, gender: '女' }
]
}
},
methods: {
getRowData(person) {
console.log(person) // 当前行的数据
}
}
}
</script>
```
在上面的示例中,我们使用v-for指令遍历persons数组,并为每一行添加一个点击事件。当点击某一行时,事件处理程序`getRowData`将被调用,并传入该行的数据作为参数。在事件处理程序中,我们可以打印出当前行的数据。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)