改造antdTree!它成了你想象中的样子🌝

2,006 阅读1分钟

前言

团队需要基于Jira Issue做一些甘特图,方便进行工作排期,工作统计等。

感兴趣的同学可以看看~ 链接

结合了antd,找了一波组件,感觉antd tree最接近,但是样式不太符合,丰衣足食只能自己改造啦,先来看看效果:

图

tree组件支持的功能有:

  1. 上下收放,能展示数据层级关系
  2. 点击放下,可以按需加载
  3. 支持拖拽,可以改变指定数据的位置

就问你们一句香不香,我觉得挺香的😂😂

实现

想要实现像表格一样有表头,而且有行有列,第一时间能想到栅格布局col row

学习table,先来构造columns:

interface Columns {
  value: string // dataIndex
  title:string // 表头label
  span?: number // 占多少格,一行一共有24格
  offset?: number // 偏移多少格
}
const cols = [
  {
    value: 'type',
    title: 'Type',
    span: 1.5,
  },
  {
    value: 'key',
    title: 'key',
    span: 4,
  },
  {
    value: 'summary',
    title: 'Summary',
    span: 7,
  },
  {
    value: 'startDate',
    title: 'Start Date',
    span: 4,
  },
  {
    value: 'endDate',
    title: 'End Date',
    span: 4,
  },
  {
    value: 'status',
    title: 'Status',
    span: 3,
  },
];

生成表头

<Row className="tableHeader" align="middle" gutter={12}>
    {columns.map(({ value, title, ...rest }) => (
        <Col key={value} {...rest} className={value}>
            {title}
         </Col>
     ))}
</Row>

生成tree

const getTreeData = (event) => {
    const result = [];
  const fn = (list, parentId, target, count) => {
    list.forEach((item) => {
      // 计算当前层级
      const sCount = count < 0 ? 0 : count - 1;
      const children = [];
      const task = {
        title: (
          <Row
            align="middle"
            // 层级越深padding约大
            style={{ paddingLeft: `${sCount * 24}px` }}
            gutter={{ xs: 8, sm: 12 }}
          >
              {columns.map(({ value, title, ...rest }) => (
                <Col
                  key={title}
                  {...rest}
                  style={{
                    overflow: "hidden",
                    whiteSpace: "nowrap",
                    textOverflow: "ellipsis"
                  }}
                >
                  {item[value]}
                </Col>
              ))}
            </Row>
          ),
          isLeaf: false,
          key: `${item.id}_${parentId}_${item.id}`,
          children
        };
        target.push(task);
        if (item.children) fn(item.children, item.id, children, sCount);
      });
    };
    fn(event, 0, result, 3);
    return result;
  };

<Tree
   treeData={data}
  // 按需加载函数 
  loadData={onLoadData}
  // 监听展开
  onExpand={handleExpand}
  // 监听选择
  onSelect={handleSelect}
  autoExpandParent={false}
/>

链接

antd-design