VueJS中后端日期前端格式化报错问题排查

你遇到的TypeError: Cannot read property 'map' of undefined错误，主要是代码里的两个变量名写错了，加上一些小细节没注意到，咱们一步步来解决：

一、核心错误点 #

1. 计算属性数据源错误：你在formatedItems里写了this.rows.map(...)，但你的数据定义是items: []，应该用this.items.map(...)，rows是未定义的变量，所以触发了报错。
2. 展开运算符变量名错误：箭头函数里的...items应该是...item（单个item对象，不是整个items数组），这里变量名写错了。

二、修复后的代码片段 #

下面是修正后的关键代码部分，我标出来了修改的地方：

<template>
  <vue-good-table 
    :columns="columns" 
    :rows="formatedItems" 
    :paginate="true" 
    :lineNumbers="true"
  />
</template>

<script>
// 别忘了引入moment，如果还没装的话先执行 npm install moment
import moment from 'moment'
import Datepicker from './Datepicker.vue' // 假设你的Datepicker组件路径正确

export default {
  components: { Datepicker },
  data(){
    return {
      DatePickerFormat: 'dd/MM/yyyy',
      items: [],
      columns: [
        // 你的列定义保持不变
        { label: 'Number', field: 'number', type: 'String', filterable: true, placeholder: 'Number' },
        { label: 'Identification number', field: 'identNumber', type: 'String', filterable: true, placeholder: 'Identification number' },
        { label: 'Name', field: 'name', type: 'String', filterable: true, placeholder: 'Name' },
        { label: 'Code', field: 'code', type: 'String', filterable: true, placeholder: 'Code' },
        { label: 'From', field: 'dateFrom', type: 'String', filterable: true, placeholder: 'dd/mm/yyyy' },
        { label: 'To', field: 'dateTo', type: 'String', filterable: true, placeholder: 'dd/mm/yyyy' },
        { label: 'Last change', field: 'dateChanged', type: 'String', filterable: true, placeholder: 'dd/mm/yyyy' },
        {}, {}
      ],
      // 其他数据定义保持不变
      fields : {
        "Number": "number",
        "Identification numer": "identNumber",
        "Name": "name",
        "Code": "code",
        "From": "dateFrom",
        "To": "dateTo",
        "Last Change": "dateChanged"
      },
      json_meta: [
        [{ "key": "charset", "value": "utf-8" }]
      ]
    }
  },
  computed: {
    formatedItems () {
      if (!this.items || this.items.length === 0) return []
      // 这里把this.rows改成this.items，把...items改成...item
      return this.items.map(item => {
        return {
          ...item,
          dateFrom: moment(item.dateFrom).format('DD/MM/YYYY'),
          dateTo: moment(item.dateTo).format('DD/MM/YYYY'),
          dateChanged: moment(item.dateChanged).format('DD/MM/YYYY')
        }
      })
    }
  }
}
</script>

三、另一种更简洁的方案：使用vue-good-table的列格式化函数 #

其实不用单独写计算属性，vue-good-table支持直接在列定义里用formatter函数来格式化内容，这样代码更精简：

修改你的columns数组里的日期列：

columns: [
  // 其他列保持不变
  { 
    label: 'From', 
    field: 'dateFrom', 
    type: 'String', 
    filterable: true, 
    placeholder: 'dd/mm/yyyy',
    formatter: (value) => moment(value).format('DD/MM/YYYY')
  },
  { 
    label: 'To', 
    field: 'dateTo', 
    type: 'String', 
    filterable: true, 
    placeholder: 'dd/mm/yyyy',
    formatter: (value) => moment(value).format('DD/MM/YYYY')
  },
  { 
    label: 'Last change', 
    field: 'dateChanged', 
    type: 'String', 
    filterable: true, 
    placeholder: 'dd/mm/yyyy',
    formatter: (value) => moment(value).format('DD/MM/YYYY')
  },
  {}, {}
]

这样你直接把:rows="items"绑定回去就行，不用再用计算属性，表格会自动帮你格式化日期。

四、额外注意事项 #

• 确保你已经安装了moment：执行npm install moment或者yarn add moment
• 如果时间戳是字符串类型，moment也能自动识别，但如果遇到识别问题，可以加上第二个参数moment(value, 'x')（'x'表示Unix毫秒时间戳）

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