使用日期为空时的Vue-good-table无效日期

Question

我正在为 Vuejs 使用一个名为 vue-good-table 的表格组件。 它允许您使用不同的格式（如字符串、数字和日期）来格式化列。

我今天的问题与日期格式有关。我能够正确地格式化该列，但是，来自数据库的一些值是空的，然后对于那些具有空日期的行，它会出现一个标签 Invalid Date。

有没有办法将这些列配置为可为空或以防止显示此消息的方式格式化它们？我宁愿将表格单元格留空，而不是显示该标签。

以下示例显示了我正在描述的场景

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

<script>

  export default {
    name: 'Table',
    computed: {
      columns() {
        return [{
          field:"fieldA",
          label:"fieldA",
          type:"number"
        },{
          field:"fieldB",
          label:"fieldB",
          type:"date",
          inputFormat: 'YYYY/MM/DD',
          outputFormat: 'YYYY/MM/DD'
        }];
      }
    },
    rows() {
      return [{
        fieldA: 1,
        fieldB: null
      },{
        fieldA: 1,
        fieldB: '2017/01/04'
      }];
    }
  }
</script>

在这种情况下，我将有一个日期格式正确的字段，另一个字段带有标签Invalid Date

谢谢

-- 更新-- 此问题已在最新版本中得到修复。

Answer 1

编辑：我刚刚意识到 formatFn 函数会覆盖输入和输出格式选项，因为它只会使用该函数来格式化数据。不确定这是否是最好的方法，但是您应该自己在函数上格式化数据（或在传递到表之前格式化数据）。这是一个使用时刻的示例：

{
    label: 'Date/Time',
    field: 'date',
    type: 'date',
    formatFn: function (value) {
        return value != null ? moment(value, 'DD/MM/YYYY HH:mm:ss').format('DD-MM-YYYY HH:mm:ss') : null
    }
}

---

我遇到了同样的问题，我能够使用 formatFn 函数 (https://github.com/xaksis/vue-good-table#formatfn-function) 格式化数据。

{
    label: 'Date/Time',
    field: 'date',
    type: 'date',
    dateInputFormat: 'DD/MM/YYYY HH:mm:ss',
    dateOutputFormat: 'DD-MM-YYYY HH:mm:ss',
    formatFn: function (value) {
        return value != null ? value : null
    }
}

希望对你有帮助