vue中使用gantt-elastic實(shí)現(xiàn)可拖拽甘特圖的示例代碼
更新時間：2022年07月07日 10:33:30 作者：suoh's Blog
這篇文章主要介紹了vue中使用gantt-elastic實(shí)現(xiàn)可拖拽甘特圖,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
官方例子效果圖：
可以橫向以及縱向鼠標(biāo)拖拽表格滑動。可以手動調(diào)整列寬等功能
1、安裝gantt-elastic
npm install --save gantt-elastic
2、安裝gantt-elastic-header
npm install --save gantt-elastic-header
3、當(dāng)然你項(xiàng)目里面沒有安裝dayjs的話還需要安裝一下，因?yàn)樗倬W(wǎng)的例子用到了
npm install dayjs --save
4、到這里如果你項(xiàng)目里面安了less-loader可能會報錯
說你的less-loader版本太高，必須是2.3.1或者3.0.0版本 ，因?yàn)槲业氖?.0版本的
此時需要再次安裝指定版本的less-loader
npm install less-loader@3.0.0 --save
然后再次安裝dayjs。就ok了
5、官方例子全代碼。復(fù)制粘貼即可。
<template>
<q-page class="q-pa-sm">
<gantt-elastic :options="options" :tasks="tasks" @tasks-changed="tasksUpdate" @options-changed="optionsUpdate" @dynamic-style-changed="styleUpdate">
<gantt-header slot="header"></gantt-header>
</gantt-elastic>
<div class="q-mt-md" />
<q-btn @click="addTask" icon="mdi-plus" label="Add task" />
</q-page>
</template>
<style>
</style>
<script>
import GanttElastic from "gantt-elastic";
import GanttHeader from "gantt-elastic-header";
import dayjs from "dayjs";
// just helper to get current dates
function getDate(hours) {
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();
const currentDay = currentDate.getDate();
const timeStamp = new Date(
currentYear,
currentMonth,
currentDay,
0,
0,
0
).getTime();
return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
}
let tasks = [
{
id: 1,
label: "大任務(wù)1",
user:
'<a target="_blank" style="color:#0077c0;">John Doe</a>',
start: getDate(-24 * 5),
duration: 15 * 24 * 60 * 60 * 1000,
percent: 85,
type: "project"
//collapsed: true,
},
{
id: 2,
label: "With great power comes great responsibility",
user:
'<a target="_blank" style="color:#0077c0;">Peter Parker</a>',
parentId: 1,
start: getDate(-24 * 4),
duration: 4 * 24 * 60 * 60 * 1000,
percent: 50,
type: "milestone",
collapsed: true,
style: {
base: {
fill: "#1EBC61",
stroke: "#0EAC51"
}
}
},
{
id: 3,
label: "Courage is being scared to death, but saddling up anyway.",
user:
'<a target="_blank" style="color:#0077c0;">John Wayne</a>',
parentId: 2,
start: getDate(-24 * 3),
duration: 2 * 24 * 60 * 60 * 1000,
percent: 100,
type: "task"
},
{
id: 4,
label: "Put that toy AWAY!",
user:
'<a target="_blank" style="color:#0077c0;">Clark Kent</a>',
start: getDate(-24 * 2),
duration: 2 * 24 * 60 * 60 * 1000,
percent: 50,
type: "task",
dependentOn: [3]
},
{
id: 5,
label:
"One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.",
user:
'<a target="_blank" style="color:#0077c0;">Austin Powers</a>',
parentId: 4,
start: getDate(0),
duration: 2 * 24 * 60 * 60 * 1000,
percent: 10,
type: "milestone",
style: {
base: {
fill: "#0287D0",
stroke: "#0077C0"
}
}
},
{
id: 6,
label: "Butch Mario and the Luigi Kid",
user:
'<a target="_blank" style="color:#0077c0;">Mario Bros</a>',
parentId: 5,
start: getDate(24),
duration: 1 * 24 * 60 * 60 * 1000,
percent: 50,
type: "task",
collapsed: true,
style: {
base: {
fill: "#8E44AD",
stroke: "#7E349D"
}
}
},
{
id: 7,
label: "Devon, the old man wanted me, it was his dying request",
user:
'<a target="_blank" style="color:#0077c0;">Knight Rider</a>',
parentId: 2,
dependentOn: [6],
start: getDate(24 * 2),
duration: 4 * 60 * 60 * 1000,
percent: 20,
type: "task",
collapsed: true
},
{
id: 8,
label: "Hey, Baby! Anybody ever tell you I have beautiful eyes?",
user:
'<a target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
parentId: 7,
dependentOn: [7],
start: getDate(24 * 3),
duration: 1 * 24 * 60 * 60 * 1000,
percent: 0,
type: "task"
},
{
id: 9,
label:
"This better be important, woman. You are interrupting my very delicate calculations.",
user:
'<a target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
parentId: 8,
dependentOn: [8, 7],
start: getDate(24 * 4),
duration: 4 * 60 * 60 * 1000,
percent: 20,
type: "task",
style: {
base: {
fill: "#8E44AD",
stroke: "#7E349D"
}
}
},
{
id: 10,
label: "current task",
user:
'<a target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 5),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task"
},
{
id: 11,
label: "test task",
user:
'<a target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 6),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task"
},
{
id: 12,
label: "test task",
user:
'<a target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 7),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task",
parentId: 11
},
{
id: 13,
label: "test task",
user:
'<a target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 8),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task"
},
{
id: 14,
label: "test task",
user:
'<a target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 9),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task"
},
{
id: 15,
label: "test task",
user:
'<a target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 16),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task"
}
];
let options = {
taskMapping: {
progress: "percent"
},
maxRows: 100,
maxHeight: 500,
title: {
label: "Your project title as html (link or whatever...)",
html: false
},
row: {
height: 24
},
calendar: {
hour: {
display: true
}
},
chart: {
progress: {
bar: false
},
expander: {
display: true
}
},
taskList: {
expander: {
straight: false
},
columns: [
{
id: 1,
label: "ID",
value: "id",
width: 40
},
{
id: 2,
label: "Description",
value: "label",
width: 200,
expander: true,
html: true,
events: {
click({ data, column }) {
alert("description clicked!\n" + data.label);
}
}
},
{
id: 3,
label: "Assigned to",
value: "user",
width: 130,
html: true
},
{
id: 3,
label: "Start",
value: task => dayjs(task.start).format("YYYY-MM-DD"),
width: 78
},
{
id: 4,
label: "Type",
value: "type",
width: 68
},
{
id: 5,
label: "%",
value: "progress",
width: 35,
style: {
"task-list-header-label": {
"text-align": "center",
width: "100%"
},
"task-list-item-value-container": {
"text-align": "center",
width: "100%"
}
}
}
]
},
locale: {
name: "en",
Now: "Now",
"X-Scale": "Zoom-X",
"Y-Scale": "Zoom-Y",
"Task list width": "Task list",
"Before/After": "Expand",
"Display task list": "Task list"
}
};
export default {
name: "Gantt",
components: {
GanttElastic,
GanttHeader
},
data() {
return {
tasks,
options,
dynamicStyle: {},
lastId: 16
};
},
methods: {
addTask() {
this.tasks.push({
id: this.lastId++,
label:
'<a target="_blank" style="color:#0077c0;">Yeaahh! you have added a task bro!</a>',
user:
'<a target="_blank" style="color:#0077c0;">Awesome!</a>',
start: getDate(24 * 3),
duration: 1 * 24 * 60 * 60 * 1000,
percent: 50,
type: "project"
});
},
tasksUpdate(tasks) {
this.tasks = tasks;
},
optionsUpdate(options) {
this.options = options;
},
styleUpdate(style) {
this.dynamicStyle = style;
}
}
};
</script>運(yùn)行成功就是這樣的頁面了。
當(dāng)然他不一定符合你的需求比如表頭設(shè)置，因此需要通過設(shè)置參數(shù)數(shù)據(jù)去實(shí)現(xiàn)不同的效果。
缺點(diǎn)：沒有開發(fā)文檔，英文的都沒有，很多參數(shù)設(shè)置需要自己研究。如果改動不大的話還可以參考，跟需求差的多的話不建議使用~~
到此這篇關(guān)于vue中使用gantt-elastic實(shí)現(xiàn)可拖拽甘特圖的文章就介紹到這了,更多相關(guān)vue可拖拽甘特圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解從新建vue項(xiàng)目到引入組件Element的方法
本篇文章主要介紹了詳解從新建vue項(xiàng)目到引入組件Element的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
vue.js的靈魂是組件，而組件的靈魂是插槽。借助于插槽，我們能最大程度上實(shí)現(xiàn)組件復(fù)用。本文主要是對插槽的實(shí)現(xiàn)機(jī)制進(jìn)行詳細(xì)概括總結(jié)，在某些場景中，有一定的用處2021-06-06
本文主要介紹了element表格行列拖拽的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue中data數(shù)據(jù)之間如何賦值問題，具有很好的參考價值，希望對大家有所幫助。2022-09-09
這篇文章主要介紹了詳解vue中v-on事件監(jiān)聽指令的基本用法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了使用Nuxt.js改造已有項(xiàng)目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
el-select如何獲取當(dāng)前選中的對象所有(item)數(shù)據(jù)
在開發(fā)業(yè)務(wù)場景中我們通常遇到一些奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取當(dāng)前選中的對象所有(item)數(shù)據(jù)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue3使用useDialog實(shí)現(xiàn)對話框的示例代碼
在日常開發(fā)中,彈窗是常見的一個功能,本文主要介紹了vue3使用useDialog實(shí)現(xiàn)對話框的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
watch函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于VUE3中watch監(jiān)聽使用的相關(guān)資料,需要的朋友可以參考下2022-06-06
Vue ECharts直角坐標(biāo)系配置詳細(xì)講解
數(shù)據(jù)的重要性我們大家都知道，就算再小的項(xiàng)目中都可能使用幾個圖表展示，我最近在做項(xiàng)目的過程中也是需要用到圖表，最后選擇了echarts圖表庫2022-12-12