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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM