vue3怎么获取表格某行的id
时间: 2024-03-03 19:48:18 浏览: 20
在Vue3中,可以通过以下步骤获取表格某行的id:
1. 在表格中的每一行绑定一个唯一的id,例如:
```
<template>
<table>
<tr v-for="item in items" :key="item.id" :id="'row-' + item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</table>
</template>
```
2. 在方法中获取该行的id,例如:
```
<template>
<table>
<tr v-for="item in items" :key="item.id" :id="'row-' + item.id" @click="getRowId(item.id)">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'John', age: 25, gender: 'Male' },
{ id: 2, name: 'Mary', age: 30, gender: 'Female' },
{ id: 3, name: 'Tom', age: 20, gender: 'Male' }
]
}
},
methods: {
getRowId(id) {
console.log('Row id:', id);
}
}
}
</script>
```
在上面的例子中,每一行的id都是以"row-"为前缀,后面加上该行的id,例如第一行的id为"row-1"。当点击某一行时,会调用getRowId方法并将该行的id作为参数传入,然后可以在该方法中获取该行的id并进行后续操作。
相关推荐
![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)