<template> <gantt-elastic :options="optionList" :tasks="taskList" @tasks-changed="tasksUpdate" @options-changed="optionsUpdate" @dynamic-style-changed="styleUpdate" > <gantt-header slot="header" :options="optionList" ></gantt-header> </gantt-elastic> </template>
<gantt-header slot="header" :options="optionList" ></gantt-header> </gantt-elastic> 在header中也需要绑定options的配置
options的完整配置,汉化部分在locale部分。开始gantt-header未绑定options,只有年月日汉化,表头的内容未汉化。
let options = { taskMapping: { progress: "percent", label: "label", //user:"" }, maxRows: 100, maxHeight: 500, scope: { before: 10, after: 10, }, title: { label: "aaa", html: false, }, row: { height: 24, }, calendar: { hour: { display: false, }, }, chart: { progress: { bar: false, }, expander: { display: true, }, }, taskList: { expander: { straight: false, }, columns: [ { id: 1, label: "ID", value: "id", width: 40, }, { id: 2, label: "任务名称", value: "label", width: 200, expander: true, html: true, events: { click({ data, column }) { alert("description clicked!\n" + data.label); }, }, }, { id: 3, label: "人员", value: "user", width: 130, html: true, }, { id: 3, label: "开始日期", value: (task) => dayjs(task.start).format("YYYY-MM-DD"), width: 100, }, { id: 4, label: "结束日期", value: (task) => dayjs(task.end).format("YYYY-MM-DD"), width: 100, }, { id: 5, label: "类型", value: "type", width: 80, }, { id: 6, label: "进度", value: "progress", width: 50, style: { "task-list-header-label": { "text-align": "center", width: "100%", }, "task-list-item-value-container": { "text-align": "center", width: "100%", }, }, }, ], display: true, }, locale: { name: "en", Now: "当前时间", "X-Scale": "缩放宽度", "Y-Scale": "缩放高度", "Task list width": "列头宽度", "Before/After": "时间跨度", "Display task list": "显示列头", weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], months: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月", ], }, };
参考:https://blog.csdn.net/weixin_47180815/article/details/111223743