Vue3+el-table实现甘特图
2023-12-19 06:30:31
Vue3 + el-table实现甘特图效果
代码gitee
整体实现效果如下
进度列,可以通过设置天或小时,切换不同列显示类型。
涉及到的问题
1、通过Worker解决js线程堵塞问题
在根据时间动态生成列时,由于开始时间与结束时间跨度过大时,计算列逻辑,会堵塞js线程,甚至卡死浏览器。通过Worker单独启一个副线程,单独计算列。
在public文件夹下,新增一个columnWorker.js文件
具体实现逻辑:通过不断循环累加开始时间,与结束时间进行比较,生成所需要展示的列。具体代码实现可参考gitee仓库代码。
2、整合接口返回数据,动态适配列
这里也是根据开始时间和结束时间,但是会判断过滤掉时间中没有时分秒的数据。数据处理时机是在方法handleColumn中的回调函数中调用。在Worker方法中会返回当前列所涉及到的列数据,并在handleData方法中进行数据开始时间,结束时间跨度与列时间跨度是否有交集,如果有,则在该条数据中新增字段,该字段就是生成列的数据中key属性值。
剩下的可以clone代码自己看一看,代码逻辑很简单,就没有写备注。如果有问题可以提一提。
文章来源:https://blog.csdn.net/qq_41742576/article/details/135065619
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!