其他分享
首页 > 其他分享> > gantt-elastic汉化的问题

gantt-elastic汉化的问题

作者:互联网

<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

标签:task,elastic,value,汉化,width,gantt,label,true,id
来源: https://www.cnblogs.com/luziking/p/15867215.html