首页下载资源前端vue2实现可拖拽甘特图(结合element-ui的gantt图)

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

qq_45870314106.41KB需要积分:1

资源文件列表:

drag-gantt2.zip 大约有29个文件
  1. babel.config.js 73B
  2. LICENSE 1.06KB
  3. package-lock.json 416.46KB
  4. package.json 1.01KB
  5. public/
  6. public/favicon.ico 4.19KB
  7. public/index.html 611B
  8. src/
  9. src/App.vue 317B
  10. src/assets/
  11. src/assets/logo.png 6.69KB
  12. src/components/
  13. src/components/gantt-v/
  14. src/components/gantt-v/css/
  15. src/components/gantt-v/css/gant-v.scss 4.19KB
  16. src/components/gantt-v/gantt-block.vue 643B
  17. src/components/gantt-v/gantt-drag-block.vue 180B
  18. src/components/gantt-v/gantt-his-mix.js 806B
  19. src/components/gantt-v/gantt-mix.js 7.7KB
  20. src/components/gantt-v/gantt-row.vue 307B
  21. src/components/gantt-v/gantt-time-block.vue 1.37KB
  22. src/config/
  23. src/config/dateFormat.js 1.02KB
  24. src/fake-data/
  25. src/fake-data/airPlaneData.js 4.13KB
  26. src/main.js 306B
  27. src/views/
  28. src/views/Gantt.vue 16.12KB
  29. vue.config.js 87B

资源介绍:

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