vxe-gantt 实现实现多行日期轴、按季度进行查询数据渲染

查看官网：https://vxeui.com
Github：https://github.com/x-extends/vxe-gantt
Gitee：https://gitee.com/x-extends/vxe-gantt

实现按季度选择日期后，调用接口查询数据渲染任务

代码

<template>
  <div>
    <vxe-date-picker v-model="selectValue" type="quarter" @change="loadList()"></vxe-date-picker>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import XEUtils from 'xe-utils'

const selectValue = ref('2025-01-01')

const ganttOptions = reactive({
  border: true,
  height: 500,
  loading: false,
  taskBarConfig: {
    showProgress: true,
    showContent: true,
    barStyle: {
      round: true,
      bgColor: '#fca60b',
      completedBgColor: '#65c16f'
    }
  },
  taskViewConfig: {
    scales: ['quarter', 'month', 'date'],
    tableStyle: {
      width: 320
    }
  },
  columns: [
    { field: 'title', title: '任务名称', width: 120 },
    { field: 'owner', title: '负责人', width: 100 },
    { field: 'start', title: '开始时间', width: 160 },
    { field: 'end', title: '结束时间', width: 160 }
  ],
  data: []
})

// 模拟后端接口
const loadList = () => {
  ganttOptions.loading = true
  setTimeout(() => {
    const mockList = []
    for (let i = 0; i < 10; i++) {
      const selectDate = XEUtils.toStringDate(selectValue.value || Date.now())
      selectDate.setDate(XEUtils.random(1, 12))
      const startDate = XEUtils.toDateString(selectDate)
      selectDate.setDate(XEUtils.random(13, 28))
      selectDate.setMonth(selectDate.getMonth() + XEUtils.random(0, 2))
      const endDate = XEUtils.toDateString(selectDate)
      mockList.push({ id: 10000 + i, title: `任务${i + 1}`, start: startDate, end: endDate, owner: '张三', progress: XEUtils.random(20, 90) })
    }
    ganttOptions.loading = false
    ganttOptions.data = mockList
  }, 300)
}

loadList()
</script>

https://gitee.com/x-extends/vxe-gantt