推荐vue3使用的甘特图组件,好用,样式美观并且功能多,并附上代码示例
时间: 2024-03-06 17:50:22 浏览: 43
推荐使用 `gantt-schedule-timeline-calendar` 组件,它可以帮助我们快速实现甘特图,并提供了多种样式和功能。
代码示例如下:
```vue
<template>
<div>
<gantt-schedule-timeline-calendar
:items="tasks"
:group-mode="'Day'"
:group-by="'week'"
:start-date="'2022-01-01'"
:end-date="'2022-02-28'"
:view-mode="'day'"
></gantt-schedule-timeline-calendar>
</div>
</template>
<script>
import GanttScheduleTimelineCalendar from 'gantt-schedule-timeline-calendar';
export default {
components: {
GanttScheduleTimelineCalendar,
},
data() {
return {
tasks: [
{
id: 1,
name: 'Task 1',
start_date: '2022-01-01',
end_date: '2022-01-05',
},
{
id: 2,
name: 'Task 2',
start_date: '2022-01-03',
end_date: '2022-01-10',
},
{
id: 3,
name: 'Task 3',
start_date: '2022-01-09',
end_date: '2022-01-15',
},
],
};
},
};
</script>
```
这里我们引入了 `gantt-schedule-timeline-calendar` 组件,然后在组件中传入了需要展示的任务数据 `tasks`,以及一些其他的配置项,比如 `group-mode`、`group-by`、`start-date`、`end-date`、`view-mode` 等等,这些配置项可以根据实际需求进行调整。
需要注意的是,`gantt-schedule-timeline-calendar` 组件是基于 Vue 2.x 开发的,如果需要在 Vue 3.x 中使用,需要进行一些适配。具体可参考官方文档。