vxe-gantt 实现实现多行日期轴、按季度进行查询数据渲染
查看官网：
Github：
Gitee：
实现按季度选择日期后，调用接口查询数据渲染任务
代码
<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>
