Quasar QTable 中处理嵌套 JSON 数组并展示多值数据

理解 Quasar QTable 的数据映射挑战

在使用 quasar 的 qtable 组件时，我们经常需要将后端返回的 json 数据映射到表格的各个列。通常，field 属性可以直接指向数据对象中的某个属性，例如 field: 'name' 或 field: row => row.id。然而，当数据结构包含嵌套的数组，并且我们需要显示数组中所有元素的某个特定属性时，直接的属性访问方式就会失效。

考虑以下 JSON 数据结构，其中 persons 是一个包含多个人员对象的数组：

{
  "id": 4291,
  "persons": [
    {
      "id": 12485,
      "name": "张三",
      "email": "zhangsan@example.com"
    },
    {
      "id": 21898,
      "name": "李四",
      "email": "lisi@example.com"
    }
  ]
}

如果我们希望在一个 QTable 列中显示所有 persons 的姓名，直接使用 field: rows => rows.persons.name 是不正确的，因为 rows.persons 是一个数组，它本身没有 name 属性。这种尝试只会导致数据无法正确显示或显示 undefined。

使用 Array.prototype.map() 提取多值数据

解决上述问题的关键在于利用 JavaScript 的 Array.prototype.map() 方法。map() 方法会遍历数组中的每个元素，并对每个元素执行一个回调函数，然后将回调函数的返回值组成一个新的数组。这正是我们从嵌套数组中提取特定属性所需要的操作。

例如，要从 persons 数组中提取所有人员的姓名，我们可以这样做：

rows.persons.map(person => person.name)

这段代码会返回一个包含所有人员姓名的数组，例如 ["张三", "李四"]。

在 Quasar QTable 列中应用 map()

将 map() 方法集成到 QTable 的列定义中非常简单。我们可以在 field 属性的回调函数中使用它：

FashionLabs

AI服装模特、商品图，可商用，低价提升销量神器

38

查看详情

const columns = [
  {
    name: "personName",
    label: "人员姓名",
    // 使用 map 方法从嵌套数组中提取所有姓名，并用逗号连接成字符串
    field: row => row.persons.map(person => person.name).join(', '),
    sortable: true,
    align: "center",
  },
  // ... 其他列定义
];

在这个示例中：

1. row => row.persons 获取到当前行数据中的 persons 数组。
2. .map(person => person.name) 遍历 persons 数组，为每个 person 对象提取其 name 属性，生成一个姓名数组（例如 ["张三", "李四"]）。
3. .join(', ') 将这个姓名数组中的所有元素用逗号和空格连接成一个单一的字符串（例如 "张三, 李四"），这样就可以在表格单元格中清晰地显示出来。

示例代码

以下是一个完整的 Quasar QTable 列定义示例，展示了如何处理嵌套的 persons 数组：

<template>
  <q-page class="q-pa-md">
    <q-table
      title="人员列表"
      :rows="dataRows"
      :columns="columns"
      row-key="id"
    />
  </q-page>
</template>

<script setup>
import { ref } from 'vue';

// 模拟的 JSON 响应数据
const dataRows = ref([
  {
    id: 4291,
    description: "项目A",
    persons: [
      { id: 12485, name: "张三", email: "zhangsan@example.com" },
      { id: 21898, name: "李四", email: "lisi@example.com" }
    ]
  },
  {
    id: 4292,
    description: "项目B",
    persons: [
      { id: 30001, name: "王五", email: "wangwu@example.com" }
    ]
  },
  {
    id: 4293,
    description: "项目C",
    persons: [] // 处理空数组的情况
  }
]);

// Quasar QTable 列定义
const columns = [
  {
    name: "id",
    label: "ID",
    field: "id",
    sortable: true,
    align: "left",
  },
  {
    name: "description",
    label: "描述",
    field: "description",
    align: "left",
  },
  {
    name: "personName",
    label: "参与人员",
    // 使用 map 提取所有人员姓名，并用逗号连接
    // 如果 persons 数组为空，join() 会返回空字符串，避免错误
    field: row => row.persons.map(person => person.name).join(', '),
    sortable: false, // 对连接后的字符串排序可能无意义
    align: "center",
  },
  // 您可以根据需要添加更多列
];
</script>

注意事项与扩展

1. 空数组处理： map() 方法在空数组上调用时，会返回一个空数组。随后调用 .join(', ') 会返回一个空字符串，这对于表格显示是友好的，避免了错误。
2. 自定义分隔符： join() 方法的参数可以是任意字符串，例如 join(' / ') 可以用斜杠分隔姓名，join('<br>') 结合 v-html 或 scoped slot 可以实现换行显示。
3. 更复杂的渲染： 如果需要对每个提取出的姓名进行更复杂的渲染（例如，将每个姓名显示为一个 q-chip 或一个带链接的文本），则不应直接使用 join()。此时，应在 field 中返回 map 后的数组本身，然后结合 Quasar QTable 的 body-cell 作用域插槽 (scoped slot) 来迭代并渲染这些数据。

   <!-- 在 QTable 模板中 -->
   <template v-slot:body-cell-personName="props">
     <q-td :props="props">
       <q-chip v-for="name in props.value" :key="name" dense color="primary" text-color="white">
         {{ name }}
       </q-chip>
     </q-td>
   </template>

   登录后复制

   对应的 columns 定义则为：

   {
     name: "personName",
     label: "参与人员",
     field: row => row.persons.map(person => person.name), // 直接返回数组
     // ...
   }

   登录后复制
4. 性能考虑： 对于包含大量行和复杂嵌套数组的表格，map() 方法的计算会在每次渲染时执行。通常情况下这不会造成性能问题，但如果遇到卡顿，可以考虑在数据加载时预处理数据，或者使用 computed 属性进行缓存。

总结

通过巧妙地运用 JavaScript 的 Array.prototype.map() 方法，我们可以有效地从 Quasar QTable 中嵌套的 JSON 数组中提取和展示多值数据。无论是简单地将数据连接成字符串显示，还是结合作用域插槽进行高级渲染，map() 都提供了一个灵活且强大的解决方案，确保表格能够准确、清晰地呈现复杂的业务数据。理解并掌握这种数据处理技巧，将极大提升您在 Quasar 应用中处理数据展示的能力。

以上就是Quasar QTable 中处理嵌套 JSON 数组并展示多值数据的详细内容，更多请关注php中文网其它相关文章！