Quasar+Vue3中如何映射JSON响应提取persons数组所有姓名

persons字段是数组类型，直接访问.name属性、或者只取[0]索引项都无法拿到全部人员姓名，以下是两种可直接使用的实现方式：

方式1：直接拼接字符串返回（适合纯文本展示） #

修改列配置的field回调，遍历数组提取所有name值后拼接为字符串即可：

{
  name: "personName",
  label: "Name",
  field: row => row.persons.map(person => person.name).filter(name => name).join('、'),
  sortable: true,
  align: "center",
}

代码逻辑说明：

• map(person => person.name)：遍历persons数组，提取每个人员对象的name字段，生成纯姓名的数组
• filter(name => name)：过滤掉空字符串、null/undefined这类无效姓名，避免出现多余分隔符
• join('、')：把姓名数组合并为单个字符串，分隔符可根据需求替换，比如用逗号就写join(', ')

方式2：自定义列插槽渲染（适合带样式的交互场景） #

如果需要给每个姓名加独立样式（比如标签、点击事件），可以通过Quasar表格的body插槽自定义渲染内容，列配置保留基础field用于排序即可：

<q-table
  :rows="yourTableData"
  :columns="columns"
  row-key="id"
>
  <!-- 对应personName列的自定义内容插槽 -->
  <template #body-cell-personName="slotProps">
    <q-td :props="slotProps" class="flex q-gutter-xs flex-center">
      <q-chip
        v-for="person in slotProps.row.persons"
        :key="person.id"
        size="sm"
        color="primary"
        outline
      >
        {{ person.name }}
      </q-chip>
    </q-td>
  </template>
</q-table>

这种写法下排序功能依然正常生效，因为field返回的拼接字符串会被用于排序逻辑计算。

内容的提问来源于stack exchange，提问作者Halan Oliveira