You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 03:48:24