vue-good-table日期为null时显示Invalid Date的解决办法咨询

嘿，这个问题我之前在项目里也碰到过！vue-good-table对无效/空日期的默认提示确实有点恼人，不过有几个简单的方案能轻松搞定它：

方法1：用自定义格式化函数（最灵活） #

你可以给日期列指定一个formatter函数，手动判断值是否有效，无效时返回空字符串或者自定义文本：

columns: [
  {
    label: '创建日期',
    field: 'createdAt',
    type: 'date',
    formatter: (value) => {
      // 检查值是否为null或者无法转成有效日期
      if (!value || isNaN(new Date(value).getTime())) {
        return ''; // 也可以返回'无数据'这类自定义提示
      }
      // 正常格式化日期，这里用你需要的格式
      return new Date(value).toLocaleDateString('zh-CN');
    }
  }
]

这个方法适合需要对日期做特殊处理的场景，比如适配不同地区的日期格式，或者根据业务逻辑返回不同提示。

方法2：利用组件自带的nullValue配置（最简单） #

vue-good-table的列配置里自带了nullValue属性，直接指定当值为null时显示的内容就行，不用写额外函数：

columns: [
  {
    label: '更新日期',
    field: 'updatedAt',
    type: 'date',
    dateInputFormat: 'YYYY-MM-DD', // 匹配你的数据库日期格式
    dateOutputFormat: 'YYYY年MM月DD日', // 你想要的显示格式
    nullValue: '' // 这里设为空字符串，也可以用'--'当占位符
  }
]

这个方案最省心，适合不需要复杂逻辑的常规场景。

方法3：预处理数据源（提前处理数据） #

如果不想在组件配置里动手，也可以在拿到后端返回的数据后，先把null的日期字段替换成空字符串：

// 假设后端返回的数据是apiData
const processedData = apiData.map(item => ({
  ...item,
  // 把null的日期字段换成空字符串
  createdAt: item.createdAt ?? '',
  updatedAt: item.updatedAt ?? ''
}));
// 再把processedData传给vue-good-table的rows属性

这种方法适合需要统一处理所有空值的场景，一次性搞定所有日期列的问题。

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