下载资源前端资源详情
drag-gantt2.zip
大小:106.41KB
价格:18积分
下载量:0
评分:
5.0
上传者:qq_45870314
更新日期:2025-09-22

vue2实现可拖拽甘特图(结合element-ui的gantt图)

资源文件列表(大概)

文件名
大小
babel.config.js
73B
LICENSE
1.06KB
package-lock.json
416.46KB
package.json
1.01KB
public/
-
public/favicon.ico
4.19KB
public/index.html
611B
src/
-
src/App.vue
317B
src/assets/
-
src/assets/logo.png
6.69KB
src/components/
-
src/components/gantt-v/
-
src/components/gantt-v/css/
-
src/components/gantt-v/css/gant-v.scss
4.19KB
src/components/gantt-v/gantt-block.vue
643B
src/components/gantt-v/gantt-drag-block.vue
180B
src/components/gantt-v/gantt-his-mix.js
806B
src/components/gantt-v/gantt-mix.js
7.7KB
src/components/gantt-v/gantt-row.vue
307B
src/components/gantt-v/gantt-time-block.vue
1.37KB
src/config/
-
src/config/dateFormat.js
1.02KB
src/fake-data/
-
src/fake-data/airPlaneData.js
4.13KB
src/main.js
306B
src/views/
-
src/views/Gantt.vue
16.12KB
vue.config.js
87B

资源内容介绍

接到公司需求,要做一个可拖拽的甘特图来实现排期需求,官方的插件要付费还没有中文的官方文档可以看,就去找了各种开源的demo来看,功能上都不是很齐全,于是总结了很多demo,合在一起组成了一版较为完整的满足需求的甘特图。 1.拖拽 拖拽功能是甘特图的主要功能,该demo实现了甘特图时间块上、下、左、右拖拽功能。2.排序 拖拽后时间块进行排序,计算重叠区域大小确定插入位置。3.时间选择 结合element-ui的日期时间选择器来确定时间轴。4.搜索 搜索已存在的时间块,并定位到相应位置。5.新建排期任务 使用element-ui的弹框以及表单 新建成功的排期列表添加到排期任务中。6.右键菜单 右击时间块,可以进行查看、删除、修改等操作。7.撤回 每删除或移动时间块后,增加一条操作记录,点击撤回可撤回当前操作。8.批量操作 在批量操作后点击保存,才向后端存储数据。

用户评论 (0)

发表评论

captcha