标签：task elastic value 汉化 width gantt label true id

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。