【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格

前言

大家好 我是歌谣 今天继续开发一个需求 就是我们的大屏需求 今天让我们一步步 解决所遇到的问题

第一个功能 如何渲染

参照官网案例

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

<Table dataSource={dataSource} columns={columns} />;

当我们看完了这个基础案例以后 相信我们就已经清楚该定义数据格式了

最终数据格式

结果(解决)

第二个功能 如何合并

直接看全部代码 进行重点讲解

定义处理column哥的方法 加入render

const handleColumn = (columns) => {

    for (let i = 0; i < columns.length; i++) {
      if (columns[i]?.dataIndex == "cuttingName") {
        columns[i].render = data
      } else if (columns[i]?.dataIndex == "colorName") {
        columns[i].render = dataColor
      }
    }
    return columns
  }

datacolor处理合并逻辑

datacolor是一个函数 下面看我的定义

const dataColor = (value, row, index) => {
    const obj = {
      children: value,
      props: { rowSpan: 1 },
    }
    if (columns.length > 0) {
      return filterNumData(obj, dataSource, row, index, 'colorName')
    } else {
      return obj
    }
  }

if判断特别关键 不然刚刷新页面就会报错 因为render找不到对应属性

filterNumData处理合并逻辑核心

const filterNumData = (obj, arr, record, index, flag) => {
    let length = 0
    if (arr.length > 0) {
      for (let i = index; i < arr.length; i++) {
        if (i === arr.length - 1 && arr.length != 1) {
          if (arr[i - 1][`${flag}`] === record[`${flag}`]) {
            length += 1
            break
          }
        } else {
          if (arr[i][`${flag}`] === record[`${flag}`]) {
            length += 1
          } else {
            break
          }
        }
      }
    }

五个属性 我们分别讲解 obj 自己定义了 看如上 const obj = { children: value, props: { rowSpan: 1 }, } dataSource返回的数据
row render自带 index render自带 colorName 要合并的属性 最后重新setState columns 合并完成

第三个功能 如何通过定时器渲染

根据数据返回的条数进行累加 累加到最大条数置为0

useEffect(() => {
    const timer = setInterval(() => {
      if (pageIndex == total || pageIndex == 10) {
        setPageIndex(0)
      } else {
        setPageIndex(pageIndex + 1)
      }
    }, delay)
    return () => clearInterval(timer)
  }, [pageIndex, total])

通过接口的接口赋值 完成 pageIndex变化的时候重新调用接口

useEffect(() => {
    initMenuList();
  }, [pageIndex]);

第四个功能 增加合计

<Table dataSource={dataSource} columns={columns} pagination={false}  summary={data => {
                        let totalCount = 0;
                        return (
                            <>
                                <Table.Summary.Row>
                                    <Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
                                    <Table.Summary.Cell index={1}>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2}>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={3}>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={4}>
                                        <span>{total}</span>
                                    </Table.Summary.Cell>
                                </Table.Summary.Row>
                            </>
                        );
                    }} />;

直接summary完成数据合计 对应再对应的值上面即可 继续接口返回

总结

以上就是真实项目中解决问题的思路和写法 我是歌谣 微信公众号关注前端小歌谣 带你进入强大的前端巅峰人才交流群