Vue3如何访问嵌套数组内元素并渲染为逗号分隔的表格内容

实现核心是使用JavaScript原生Array.join()方法，将嵌套数组的所有元素拼接为逗号分隔的字符串，无需引入额外依赖。 #

前置说明 #

假设你的原始数据结构如下：

// 示例原始数据
const userData = [
  {
    name: 'Ram',
    email: 'Ram@gmail.com',
    socialMedia: ['Weibo', 'LinkedIn']
  }
]

实现方式 #

方式1：模板内直接处理（适合简单场景） #

直接在插值表达式中调用join方法完成拼接：

<template>
  <!-- 表格样式可自行根据需求调整 -->
  <table border="1" cellpadding="8" cellspacing="0">
    <thead>
      <tr>
        <th>name</th>
        <th>email</th>
        <th>socialMedia</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in userData" :key="item.email">
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
        <!-- 直接拼接嵌套数组 -->
        <td>{{ item.socialMedia.join(', ') }}</td>
      </tr>
    </tbody>
  </table>
</template>

方式2：计算属性预处理（适合复杂场景） #

如果后续需要对数据做进一步处理，可通过计算属性提前格式化：

<script setup>
import { ref, computed } from 'vue'

// 原始数据
const userData = ref([
  {
    name: 'Ram',
    email: 'Ram@gmail.com',
    socialMedia: ['Weibo', 'LinkedIn']
  }
])

// 预处理后的数据
const formattedUserData = computed(() => {
  return userData.value.map(item => ({
    ...item,
    // 提前拼接好社交媒体字段
    socialMediaStr: item.socialMedia?.join(', ') ?? ''
  }))
})
</script>

<template>
  <table border="1" cellpadding="8" cellspacing="0">
    <thead>
      <tr>
        <th>name</th>
        <th>email</th>
        <th>socialMedia</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in formattedUserData" :key="item.email">
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
        <td>{{ item.socialMediaStr }}</td>
      </tr>
    </tbody>
  </table>
</template>

注意事项 #

如果嵌套数组可能为undefined/null，可以用可选链?.加空值合并运算符??做兜底，避免运行时报错：

item.socialMedia?.join(', ') ?? ''

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