如何在PrimeVue DataTable列中展示用户的车辆名称列表
问题描述
我是PrimeVue新手,现有如下Vue代码:
Vue 文件
<!-- users 是 User 对象组成的数组 --> <DataTable :value="users" :rows="10" :paginator="true"> <Column field="username" header="Username" :sortable="true"></Column> <Column field="email" header="Email" :sortable="true"></Column> <Column field="role.name" header="Role" :sortable="true"></Column> <Column field="cars" header="Cars" :sortable="true"> </Column> </DataTable>
User 对象结构
{ "username": "test", "email": "test@junk.com", "id": 1, "role": { "id": 1, "name": "Admin", "description": "Admin user" }, "cars": [{}, {}] }
Cars 数组具体结构
[ { "id": 1, "title": "Subaru BRZ" }, { "id": 2, "title": "Lotus Evora GT" } ]
需求:使用PrimeVue DataTable和Column组件,在cars列的同一行中展示该用户的所有车辆title。
解决方案
修改后的DataTable代码如下:
<DataTable :value="users" :rows="10" :paginator="true"> <Column field="username" header="Username" :sortable="true"></Column> <Column field="email" header="Email" :sortable="true"></Column> <Column field="role.name" header="Role" :sortable="true"></Column> <Column field="cars" header="Cars" :sortable="true"> <template #body="slotProps"> <span v-for="car in slotProps.data.cars">{{car.title}}</span> </template> </Column> </DataTable>
内容的提问来源于stack exchange,提问作者SkydersZ
相关产品推荐
相关产品推荐

