Vue实现简单可扩展甘特图的方法详解_vue.js_

import {GGanttChart, GGanttBar} from 'vue-ganttastic' 

 ... 

export default { ... components:{ GGanttChart, GGanttBar }, data(){ return{ myChartStart: "2020-03-01 00:00" myChartEnd: "2020-03-02 00:00" myBars: [ { myBarStart: "2020-03-01 01:30", myBarEnd: "2020-03-01 06:00" }, { myBarStart: "2020-03-01 15:10", myBarEnd: "2020-03-01 20:00" } ] } } ... }

// start date chartStart: {type: String, default: moment().startOf("day").format("YYYY-MM-DD HH:mm:ss")}, // end date chartEnd: {type: String, default: moment().startOf("day").add(12,"hours").format("YYYY-MM-DD HH:mm:ss")}, // hide or show time axis hideTimeaxis: Boolean, // width of row labels rowLabelWidth: {type: String, default: "10%"}, // row height rowHeight: {type: Number, default: 40}, // local locale: {type: String, default: "en"}, // theme name theme: String, // show or hide time grid grid: Boolean, // an array of highlighted hours highlightedHours: {type: Array, default: () => []}, // the total width of the entire ganttastic component in % width: {type: String, default: "100%"}, // pusn on overlap pushOnOverlap: {type: Boolean}, // snap background on overlap snapBackOnOverlap: {type: Boolean}, // minimum gap between bars minGapBetweenBars: { type: Number, default: 0 }