vxe-gantt 实现实现多行日期轴、按季度进行查询数据渲染
<p>vxe-gantt 实现实现多行日期轴、按季度进行查询数据渲染</p><p>查看官网：https://vxeui.com<br>
Github：https://github.com/x-extends/vxe-gantt<br>
Gitee：https://gitee.com/x-extends/vxe-gantt</p>
<p>实现按季度选择日期后，调用接口查询数据渲染任务</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202508/3563285-20250825105803684-860024756.gif"></p>
<h2 id="代码">代码</h2>
<pre><code class="language-html"><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>
</code></pre>
<p>https://gitee.com/x-extends/vxe-gantt</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19056512
頁:
[1]