Vue3+el-table实现甘特图

Vue3 + el-table实现甘特图效果

代码gitee
整体实现效果如下

进度列，可以通过设置天或小时，切换不同列显示类型。

涉及到的问题

1、通过Worker解决js线程堵塞问题

在根据时间动态生成列时，由于开始时间与结束时间跨度过大时，计算列逻辑，会堵塞js线程，甚至卡死浏览器。通过Worker单独启一个副线程，单独计算列。
在public文件夹下，新增一个columnWorker.js文件

具体实现逻辑：通过不断循环累加开始时间，与结束时间进行比较，生成所需要展示的列。具体代码实现可参考gitee仓库代码。

2、整合接口返回数据，动态适配列

这里也是根据开始时间和结束时间，但是会判断过滤掉时间中没有时分秒的数据。数据处理时机是在方法handleColumn中的回调函数中调用。在Worker方法中会返回当前列所涉及到的列数据，并在handleData方法中进行数据开始时间，结束时间跨度与列时间跨度是否有交集，如果有，则在该条数据中新增字段，该字段就是生成列的数据中key属性值。

剩下的可以clone代码自己看一看，代码逻辑很简单，就没有写备注。如果有问题可以提一提。