526互联

dhtmlx基本使用demo，vue

发布时间 2023-07-13 16:11:01作者: QinHaoRan

main.js   引入样式

import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'

父组件： gangtData，数据

<ganttChart v-if="value8" :gangtData="gangtData" />

 子组件：

<template>
    <div style="height:62vh;" ref="ganttContainer"></div>
</template>
  
<script>
import { gantt } from 'dhtmlx-gantt'

export default {
    props: ['gangtData'],
    mounted() {
        this.initGantt()
    },
    methods: {
        initGantt() {
            //配置中文
            gantt.i18n.setLocale('cn')
            gantt.init(this.$refs.ganttContainer);
            // 禁止点击事件
            gantt.config.details_on_dblclick = false;
            // 禁止拖拽任务
            gantt.attachEvent("onBeforeTaskDrag", function (id, mode, e) {
                return false
            })
            gantt.config.grid_width = 500;
            // 在此处进行其他配置和初始化设置
            // 设置任务数据
            gantt.parse({ data: this.gangtData })
            // 定义列
            gantt.config.columns = [
                { name: 'text', label: '工单名称', tree: true, width: '200' },
                // { name: 'name', label: '物品名称', align: 'center', width: '200' },
                { name: 'start_date', label: '开始日期', align: 'center', width: '120' },
                { name: 'End_yime', label: '结束日期', align: 'center', width: '120' },
                { name: 'duration', label: '持续时间', align: 'center', width: '100' }
            ]
        }
    }
};
</script>