如何从指定格式数据提取内容并在DataTable中展示？

需求说明 #

需要实现一个DataTable，包含DAY 1到DAY 5共5列。当接口返回数据的dayName匹配对应日期时，提取该数据下weekDay数组中的theme、themeTime、title字段，组合成"theme - themeTime mins - title"格式的文本，展示在对应日期列中。

原始接口数据格式 #

[
    {
        "id": "7658dc9e-5720-4544-8780-761e1993a8a3",
        "folderMapID": "d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1",
        "themeName": "test",
        "classTime": 45,
        "dayName": "DAY 2",
        "isActive": true,
        "weekDay": [
            {
                "id": "2cebd6c7-339d-4d99-a199-b1c145211272",
                "position": 1,
                "theme": "QA Theme One",
                "themeTime": 14,
                "title": "test title",
                "isActive": true
            }
        ]
    },
    {
        "id": "8f638849-6e54-4949-b404-300aa2c8a0c0",
        "folderMapID": "d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1",
        "themeName": "Butterfly Theme",
        "classTime": 60,
        "dayName": "DAY 1",
        "isActive": true,
        "weekDay": [
            {
                "id": "3796dac9-18b0-4dd4-912f-8aeeede84e6b",
                "position": 1,
                "theme": "Music Theme",
                "themeTime": 10,
                "title": "singing practice",
                "isActive": true
            },
            {
                "id": "57b8f608-d2ad-4f7b-807b-db75aa0d10a9",
                "position": 2,
                "theme": "Dance Theme",
                "themeTime": 15,
                "title": "learn dance steps",
                "isActive": true
            },
            {
                "id": "d395b047-2847-474a-a553-afbd93782092",
                "position": 3,
                "theme": "QA Theme One",
                "themeTime": 20,
                "title": "QA testing",
                "isActive": true
            }
        ]
    }
]

原始代码问题分析 #

1. Headers配置错误：列的value字段设置不符合数据结构，无法正确映射到处理后的字段（如DAY 1的value设为theme，其他列设为0）
2. 数据处理逻辑偏差：当前按theme作为行字段名生成数据，导致表格列与数据字段不匹配，未按日期列对应填充内容

修正后的代码实现 #

组件代码（JavaScript） #

export default {
  data() {
    return {
      weekScheduleList: [],
      // 修正headers：value对应日期字段名，与数据处理后的结构匹配
      headers: [
        { text: 'DAY 1', value: 'day1', align: 'center', sortable: true },
        { text: 'DAY 2', value: 'day2', align: 'center', sortable: true },
        { text: 'DAY 3', value: 'day3', align: 'center', sortable: true },
        { text: 'DAY 4', value: 'day4', align: 'center', sortable: true },
        { text: 'DAY 5', value: 'day5', align: 'center', sortable: true }
      ],
      isLoading: false
    }
  },
  methods: {
    async getWeekScheduleList() {
      try {
        this.isLoading = true
        const res = await http.get(`${CONSTANTS.API_URL}/api/get-week/${this.folderId}`)
        const days = res.data
        const newData = []

        // 遍历每个日期数据
        days.forEach(day => {
          // 转换dayName为统一的字段名（如DAY 1 → day1）
          const dayField = day.dayName.toLowerCase().replace(' ', '')
          // 遍历该日期下的每个weekDay条目，每个条目对应表格一行
          day.weekDay.forEach(weekDay => {
            // 初始化一行数据，所有日期列默认空值
            const row = {
              day1: '',
              day2: '',
              day3: '',
              day4: '',
              day5: ''
            }
            // 填充对应日期列的内容
            row[dayField] = `${weekDay.theme} - ${weekDay.themeTime} mins - ${weekDay.title}`
            newData.push(row)
          })
        })

        this.weekScheduleList = newData
      } catch (e) {
        const errorMessage = (e?.response?.data?.message) || e.message
        this.errMsg(errorMessage)
      } finally {
        this.isLoading = false
      }
    }
  }
}

HTML模板（无需修改） #

<v-data-table :headers="headers" :items="weekScheduleList" disable-pagination
    hide-default-footer>
      <template v-slot:no-data>
        <v-card-subtitle class="d-flex justify-center">No Data Available</v-card-subtitle>
      </template>
</v-data-table>

说明 #

• 修正后的headers使用day1至day5作为列的value，与数据处理后的字段名完全匹配
• 数据处理时，每个weekDay条目对应表格的一行，仅在匹配的日期列填充组合文本，其他列留空
• 增加finally块确保加载状态正确重置

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