基于GanttElastic组件的二次开发，增加功能： 1、增加任务列表和甘特图的收缩 2、扩展自定义插槽列 3、任务列表可选择 4、前置任务finish-to-start模式 5、

安装

npm install gantt-npm

使用

<template>
  <div id="app">
		<gantt-elastic-add
			ref="gantt"
			:tasks="tasks"
			:options="options"
		></gantt-elastic-add>
  </div>
</template>

<script>
import GanttElasticAdd from 'gantt-npm'
import dayjs from 'dayjs'

export default {
  name: 'app',
  components: {
		GanttElasticAdd
  },
  data() {
	  return {
			tasks: [
				{taskName: '任务1', id: '0', start: 1647360000000, end: 1647446400000, type: 'project'},
				{taskName: '子任务1', id: '1', pid: '0', start: 1647360000000, end: 1647360000000, type: 'task'},
				{taskName: '子任务2', id: '2', pid: '0', start: 1647446400000, end: 1647446400000, dependentOn: ['1'], type: 'task'},
				{taskName: '任务2', id: '3'}
			],
			options: {
			    taskMapping: {
			      progress: "percent",
			    },
			    maxRows: 100,
			    maxHeight: 650,
			    height: 180,
			    title: {
			      label: "Gantt Title",
			      html: false
			    },
			    row: {
			      height: 32,
			    },
			    times: {
			      timeScale: 60 * 100 * 9,
			      timeZoom: 21,
			      firstTaskTime: new Date('2021-10-12').getTime(),
			      lastTaskTime: new Date('2022-10-12').getTime()
			    },
			    calendar: {
			      height: 50,
			      workingDays: [0, 1, 2, 3, 4, 5, 6],
			      gap: 0,
			      day: {
			        height: 25,
			      },
			      month: {
			        height: 25
			      },
			      hour: {
			        display: false
			      },
			    },
			    chart: {
			      progress: {
			        bar: false
			      },
			      expander: {
			        display: true
			      }
			    },
			    taskList: {
			      expander: {
			        straight: false
			      },
			      check: true,
			      widthThreshold: 100,
			      columns: [
			        {
			          id: 1,
			          label: "序号",
			          value: "serial",
			          width: 50,
			          style: {
			            "task-list-item-value-container": {
			              "text-align": "center",
			              width: "100%"
			            }
			          }
			        },
			        {
			          id: 2,
			          label: "任务名称",
			          value: 'taskName',
			          width: 180,
			          expander: true,
			          html: false,
								slot: 'title',
			          events: {
			          },
			          style: {
			            'task-list-header-label': {
			              display: 'flex',
			              'justify-content': 'center',
			              'align-items': 'center'
			            }
			          }
			        },
			        {
			          id: 3,
			          label: '工期(天)',
			          value: 'timeLimit',
			          width: 80,
			          slot: 'timeLimit',
			          style: {
			            "task-list-item-value-container": {
			              "text-align": "center",
			              width: "100%"
			            }
			          }
			        },
			        {
			          id: 4,
			          label: "开始日期",
			          value: task => task.start ? dayjs(task.start).format('YYYY-MM-DD') : '',
			          html: true,
			          width: 120,
			          style: {
			            "task-list-header-label": {
			              "text-align": "center",
			              width: "100%"
			            },
			            "task-list-item-value-container": {
			              "text-align": "center",
			              width: "100%"
			            }
			          },
			          events: {
			          }
			        },
			        {
			          id: 5,
			          label: "结束日期",
			          value: task => task.end ? dayjs(task.end).format('YYYY-MM-DD') : '',
			          width: 120,
			          style: {
			            "task-list-header-label": {
			              "text-align": "center",
			              width: "100%"
			            },
			            "task-list-item-value-container": {
			              "text-align": "center",
			              width: "100%"
			            }
			          }
			        },
			        {
			          id: 6,
			          label: '前置任务',
			          value: 'dependentOn',
			          width: 100,
			          style: {
			            "task-list-item-value-container": {
			              "text-align": "center",
			              width: "100%"
			            }
			          }
			        },
			      ]
			    },
			    locale: {
			      name: "zh",
			      Now: "Now",
			      weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
			      weekdaysShort: '日_一_二_三_四_五_六'.split('_'),
			      weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
			      months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
			      monthsShort: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
			      weekStart: 1,
			      relativeTime: {
			        future: 'in %s',
			        past: '%s ago',
			        s: '几秒钟',
			        m: '一分钟',
			        mm: '%d 分钟',
			        h: '一小时',
			        hh: '%d 小时',
			        d: '一天',
			        dd: '%d 天',
			        M: '一月',
			        MM: '%d 月',
			        y: '一年',
			        yy: '%d 年',
			      },
			      formats: {
			        LT: 'HH:mm',
			        LTS: 'HH:mm:ss',
			        L: 'DD/MM/YYYY',
			        LL: 'D MMMM YYYY',
			        LLL: 'D MMMM YYYY HH:mm',
			        LLLL: 'dddd, D MMMM YYYY HH:mm',
			      },
			      ordinal: (n) => {
			        const s = ['th', 'st', 'nd', 'rd'];
			        const v = n % 100;
			        return `[${n}${s[(v - 20) % 10] || s[v] || s[0]}]`;
			      },
			
			      "X-Scale": "Zoom-X",
			      "Y-Scale": "Zoom-Y",
			      "Task list width": "Task list",
			      "Before/After": "Expand",
			      "Display task list": "Task list"
			    }
			},
	  }
  },
}
</script>

文档

待更新