vue3实现可拖拽的甘特图
时间: 2023-08-12 19:11:53 浏览: 90
实现可拖拽的甘特图需要使用一些第三方库,比如 `vue-gantt` 或者 `vue-gantt-schedule-timeline-calendar`。
以 `vue-gantt` 为例,首先需要在项目中安装该库:
```
npm install vue-gantt --save
```
然后在组件中引入:
```vue
<template>
<div>
<gantt :tasks="tasks"></gantt>
</div>
</template>
<script>
import VueGantt from 'vue-gantt';
export default {
components: {
VueGantt,
},
data() {
return {
tasks: [
{
id: 1,
name: 'Task 1',
start: new Date(2022, 1, 1),
end: new Date(2022, 1, 5),
},
{
id: 2,
name: 'Task 2',
start: new Date(2022, 1, 6),
end: new Date(2022, 1, 10),
},
],
};
},
};
</script>
```
这样就可以在页面上展示一个简单的甘特图了。如果需要实现拖拽功能,可以使用 `vue-draggable-resizable` 库来实现:
```
npm install vue-draggable-resizable --save
```
然后在组件中引入该库:
```vue
<template>
<div>
<gantt :tasks="tasks" :task-rows-props="{ draggable: true }"></gantt>
</div>
</template>
<script>
import VueGantt from 'vue-gantt';
import VueDraggableResizable from 'vue-draggable-resizable';
export default {
components: {
VueGantt,
VueDraggableResizable,
},
data() {
return {
tasks: [
{
id: 1,
name: 'Task 1',
start: new Date(2022, 1, 1),
end: new Date(2022, 1, 5),
},
{
id: 2,
name: 'Task 2',
start: new Date(2022, 1, 6),
end: new Date(2022, 1, 10),
},
],
};
},
};
</script>
```
这样就可以实现甘特图的拖拽功能了。当然,具体的实现方式还需要根据项目需求进行调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)