vue甘特图组件vxe-gantt如何自定义日期解析格式

Vue 甘特图组件 vxe-gantt：自定义日期解析格式

在实际项目中，后端返回的日期数据往往是字符串格式，且格式可能不统一。vxe-gantt 组件提供了灵活的日期解析配置，支持通过 taskConfig.dateFormat 自定义日期格式，无需在组件外部进行额外的格式转换。

配置

在 taskConfig 中设置 dateFormat 属性，即可指定任务开始时间（start）和结束时间（end）的解析格式。

示例：

taskConfig: {
  dateFormat: 'dd/MM/yyyy'   // 支持 "日/月/年" 格式的字符串日期
}

示例

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const ganttOptions = reactive({
  // 自定义日期解析格式
  taskConfig: {
    dateFormat: 'dd/MM/yyyy'
  },
  // 表格列定义
  columns: [
    { field: 'title', title: '任务名称' },
    { field: 'start', title: '开始时间', width: 100 },
    { field: 'end', title: '结束时间', width: 100 }
  ],
  // 任务数据，日期字段与 dateFormat 格式一致
  data: [
    { id: 10001, title: 'A项目', start: '03/03/2024', end: '04/03/2024', progress: 3 },
    { id: 10002, title: '城市道路修理进度', start: '04/03/2024', end: '08/03/2024', progress: 10 },
    { id: 10003, title: 'B大工程', start: '08/03/2024', end: '12/03/2024', progress: 90 },
    { id: 10004, title: '超级大工程', start: '14/03/2024', end: '19/03/2024', progress: 15 },
    { id: 10005, title: '地球净化项目', start: '10/03/2024', end: '17/03/2024', progress: 100 }
  ]
})
</script>

支持的日期格式

dateFormat 基于常见的日期格式符号，常用组合如下：

注意：日期格式必须与 data 中 start、end 字段的实际字符串格式严格一致，否则组件将无法正确解析。

适用场景

• 后端接口返回的日期为非标准 ISO 格式
• 需要适配多语言或地区习惯的日期显示方式
• 希望在不修改原始数据的前提下，让组件自动识别日期字符串

通过 dateFormat 配置，vxe-gantt 能够灵活适配各种日期格式，显著提升开发效率和组件的通用性。

https://gantt.vxeui.com