Antd pro React Table 表格行的分类与动态合并

bluejad

已于 2023-02-28 10:44:03 修改

阅读量554

点赞数

文章标签： react Powered by 金山文档

于 2023-02-28 10:22:47 首次发布

本文链接：https://blog.csdn.net/bluejad/article/details/129256008

版权

该文章介绍了两个JavaScript函数，用于对数据进行排序（classifyRows）和合并相同行（mergeRows）。这两个函数在处理表格数据时特别有用，可以按指定键值对数据进行排序，并合并具有相同键值的行。示例中展示了如何使用这些函数来处理和展示表格数据。

摘要由CSDN通过智能技术生成

排序

  /**
   * 排序
   * @param data 
   * @param classifyRule 
   * @returns 
   */
  const classifyRows = (data: any[], classifyRule: any) => {
    const keys = classifyRule

    const classified = data.slice(1).reduce((ordered, row) => {
      // 从已经排好序的行中寻找一行 row1，如果这行 row1 的 keys 值分别等于当前遍历到的行的 keys 值，就把当前遍历到的这一行插入到 row1 之后
      // 否则把当前遍历到的行放在所有排好序的行的最后一行
      const index: any = ordered.findIndex((orderedRow: Record<string, any>) =>
        keys.reduce(
          (boolean: any, curKey: string | number) => boolean && orderedRow[curKey] === row[curKey],
          true
        )
      )
      if (index !== -1) {
        return [...ordered.slice(0, index + 1), row, ...ordered.slice(index + 1)]
      } else { return [...ordered, row] }
    }, [data[0]])

    return classified
  };

合并相同行

  /**
   * 合并相同行
   * @param rows 
   * @param key 
   * @returns 
   */
  const mergeRows = (rows: any[], key: string) => {
    rows[0].rowSpan = 1;
    let idx = 0;
    return rows.slice(1).reduce(
      (mergedRows, item, index) => {
        if (item[key] === mergedRows[idx][key]) {
          mergedRows[idx].rowSpan++;
          item.colSpan = 0;
        } else {
          item.rowSpan = 1;
          idx = index + 1;
        }
        return [...mergedRows, item];
      },
      [rows[0]]
    );
  };

使用

3.1创建表

const columns: ProColumns<LabLocationType>[] = [
    {
      title: '学校名称',
      dataIndex: 'school',
      valueType: 'text',
      ellipsis: true,
      render: (text: any, record: any) => ({
        children: <div style={{ fontWeight: "bold" }}>{text}</div>,
        props: {
          rowSpan: record.rowSpan,
          colSpan: record.colSpan
        }
      })
    },
]

3.2请求来的数据中对数据排序并且合并

request={(params) =>
  getLabLocationList({
    ...params, parentId: 0
  } as unknown as LabLocationListParams).then((res) => {
    // getLabLocationTree();
    return {
      // data: res.rows,
      data: mergeRows(classifyRows(res.rows, ['school']), 'school'),
      total: res.rows.length,
      success: true,
    };
  })
}
columns={columns}