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

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

文件下载

资源详情

[{"title":"( 20 个子文件 106KB ) vue2实现可拖拽甘特图(结合element-ui的gantt图)","children":[{"title":"babel.config.js <span style='color:#111;'> 73B </span>","children":null,"spread":false},{"title":"src","children":[{"title":"App.vue <span style='color:#111;'> 317B </span>","children":null,"spread":false},{"title":"assets","children":[{"title":"logo.png <span style='color:#111;'> 6.69KB </span>","children":null,"spread":false}],"spread":true},{"title":"main.js <span style='color:#111;'> 306B </span>","children":null,"spread":false},{"title":"components","children":[{"title":"gantt-v","children":[{"title":"gantt-row.vue <span style='color:#111;'> 307B </span>","children":null,"spread":false},{"title":"gantt-drag-block.vue <span style='color:#111;'> 180B </span>","children":null,"spread":false},{"title":"gantt-his-mix.js <span style='color:#111;'> 806B </span>","children":null,"spread":false},{"title":"gantt-mix.js <span style='color:#111;'> 7.70KB </span>","children":null,"spread":false},{"title":"gantt-block.vue <span style='color:#111;'> 643B </span>","children":null,"spread":false},{"title":"css","children":[{"title":"gant-v.scss <span style='color:#111;'> 4.19KB </span>","children":null,"spread":false}],"spread":true},{"title":"gantt-time-block.vue <span style='color:#111;'> 1.37KB </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"views","children":[{"title":"Gantt.vue <span style='color:#111;'> 16.12KB </span>","children":null,"spread":false}],"spread":true},{"title":"fake-data","children":[{"title":"airPlaneData.js <span style='color:#111;'> 4.13KB </span>","children":null,"spread":false}],"spread":true},{"title":"config","children":[{"title":"dateFormat.js <span style='color:#111;'> 1.02KB </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"LICENSE <span style='color:#111;'> 1.06KB </span>","children":null,"spread":false},{"title":"package.json <span style='color:#111;'> 1.01KB </span>","children":null,"spread":false},{"title":"public","children":[{"title":"favicon.ico <span style='color:#111;'> 4.19KB </span>","children":null,"spread":false},{"title":"index.html <span style='color:#111;'> 611B </span>","children":null,"spread":false}],"spread":true},{"title":"package-lock.json <span style='color:#111;'> 416.46KB </span>","children":null,"spread":false},{"title":"vue.config.js <span style='color:#111;'> 87B </span>","children":null,"spread":false}],"spread":true}]

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明