vue-gantt-table

Vue 下的任务、进度及甘特图组件

📦 安装

$ npm i vue-gantt-table -S

🔨 使用

<template>
  <div class="gantt-table-test">
    <GanttTable :data="tasks" />
  </div>
</template>
<script>
import { GanttTable } from "vue-gantt-table";

export default {
  components: { GanttTable },
  data() {
    return {
      tasks: [
        {
          id: "1",
          name: "张三",
          baselineStart: "2023-05-01 12:00:00",
          baselineEnd: "2023-05-03 08:00:00",
          actualStart: "2023-05-01 09:00:00",
          actualEnd: "2023-05-04 17:00:00",
          children: [
            {
              id: "3",
              name: "王五",
              baselineStart: "2023-05-01 12:00:00",
              baselineEnd: "2023-05-03 08:00:00",
              actualStart: "2023-05-01 09:00:00",
              actualEnd: "2023-05-04 17:00:00",
              progressValueStr: "70%",
            },
          ],
          progressValueStr: "90%",
        },
        {
          id: "2",
          name: "李四",
          baselineStart: "2023-05-03 16:00:00",
          baselineEnd: "2023-05-04 18:00:00",
          actualStart: "2023-05-03 09:00:00",
          actualEnd: "2023-05-04 17:00:00",
          progressValueStr: "80%",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.gantt-table-test {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>

🔠 属性

| 属性名 | 类型 | 默认值 | 说明 | |--------------------|----------------|--------------------|----------------------------------------------| | data | Array | [] | 任务数据数组 | | timeUnit | String | "day" | 当前选中的时间单位(["month", "day", "hour"]) | | mapIdTo | String, Number | "id" | 任务 id 的映射字段 | | mapNameTo | String | "name" | 任务名称的映射字段 | | mapBaselineStartTo | String | "baselineStart" | 任务计划开始时间的映射字段 | | mapBaselineEndTo | String | "baselineEnd" | 任务计划结束时间的映射字段 | | mapActualStartTo | String | "actualStart" | 任务实际开始时间的映射字段 | | mapActualEndTo | String | "actualEnd" | 任务实际结束时间的映射字段 | | mapChildrenTo | String | "children" | 任务的子任务的映射字段 | | mapProgressValueTo | String | "progressValueStr" | 任务进度的映射字段 | | mapConnectorTo | String | "connector" | 任务的连接器的映射字段 | | showActual | Boolean | true | 是否显示实际时间 | | showBaseline | Boolean | true | 是否显示计划时间 | | showLabel | Boolean | true | 是否显示任务标签 | | showProgresse | Boolean | true | 是否显示任务进度 | | showConnector | Boolean | true | 是否显示连接器 | | showTooltip | Boolean | true | 是否显示提示框 |

🎺 事件

| 事件名 | 说明 | 传参 | |---------------------|----------------|--------------| | on-task-add | 添加任务成功 | 添加的任务 | | on-task-update | 编辑任务成功 | 编辑后的任务 | | on-task-delete | 删除任务成功 | 要删除的任务 | | on-connector-create | 创建连接器成功 | 创建的连接器 | | on-connector-delete | 删除连接器成功 | 删除的连接器 |