vue怎么拿同一个表格的其他字段
时间: 2024-03-21 19:43:15 浏览: 13
如果你有一个表格,想要获取表格中的其他字段,你可以使用 Vue 的计算属性来实现。下面是一个示例代码:
```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">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.location }}</td>
</tr>
</tbody>
</table>
<p>Selected person: {{ selectedPerson }}</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' }
],
selectedPersonId: 1
};
},
computed: {
selectedPerson() {
return this.people.find(person => person.id === this.selectedPersonId);
}
}
};
</script>
```
在这个示例中,我们有一个包含三个字段(name、age 和 location)的表格,以及一个计算属性 selectedPerson,它返回当前选中的人的对象。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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)