ant-design React table表格组件合并展开错位解决_ant design框架teble组件展开标题显示问题

 错误现象

先看下我的需求，表格的column是后端返回，且个数不是固定的，第一列需要进行合并，第二列开始需要支持展开。
接下来是第一次尝试实现，在column里面通过items的数据筛选，确定rowSpan的值，结果就是第一列可以正常合并，但是一展开，
就会错位。

    const columns = [
      {
        title: '分类',
        dataIndex: 'sort',
        key: 'sort',
        ellipsis: true,
        onCell: (record: any, index: number) => {
		const arr = items.filter((res: any) => res.sort === record.sort);
        const rowSpan = index === 0 || items[index - 1].sort !== record.sort ? arr.length : 0;
         return {
         rowSpan: rowSpan,
         children: record.sort,
         };]

原因和解决思路

我这种写法rowSpan是固定的，前面第一列的合并个数是固定的，而antd的展开是相当于增加了一整行，然后页面合并就会错位。我太菜，搞不定了，求助大佬。
大佬解决思路：单击一个展开就相当于增加了一行，前面第一列的合并就需要增加一行，又因为可以同时展开多行，所以需要记录展开的位置

1. 第一步根据items计算数据，其中包含需要合并的列名称，列所在的索引位置，需要合并rowSpan的值

const {
    data = {
      header: {},
      items: [],
      total: 0,
    },
    loading,
    run: search,
  } = useRequest(getOverview, {
    manual: true,
    onSuccess: res => {
      const arr: any[] = [];
 
      (res?.items || []).forEach((_: any, i: number) => {
        let obj = arr.find(item => item.sort === _.sort);
        if (obj) {
          obj.i.push(i);
          obj.rowSpan = obj.rowSpan + 1;
        } else {
          obj = {
            sort: _.sort,
            i: [i],
            rowSpan: 1,
          };
          arr.push(obj);
        }
      });
      setSortRowSpan(arr);
    },
  });

 打印出来的sortRowSpan长这样

 2. 修改onCell方法，根据上面计算的sortRowSpan的值，多个相同的sort设置rowSpan等于它的个数，不需要合并的sort，rowSpan设置为0

 onCell: (record: any, index: number) => {
          const item = sortRowSpan.find(_ => _.sort === record.sort);
          if (item) {
            return {
              rowSpan: item?.i[0] === index ? item.rowSpan : 0,
            };
          }
          return {};
        },
      },

3. 在table的expandable属性加上onExpand，当点击加号展开一行，rowSpan+1，点击减号收起展开，rowSpan-1

expandable={{
                indentSize: 200,
                expandedRowRender: expandedRowRender,
                onExpand(expanded, record) {
                  setSortRowSpan(prev => {
                    const arr = cloneDeep(prev);
                    const item = arr.find(i => i.sort === record.sort);
                    item.rowSpan = expanded ? item.rowSpan + 1 : item.rowSpan - 1;
                    return arr;
                  });
                },
                expandedRowClassName: () => 'devops-expanded',
              }}

 4. 这时候问题基本解决了，展开和合并，第一列的合并没问题，但是最后一列又出现了错位，因为expandable展开的td的colspan默认和columns长度一致
但是第一列合并了，所以colspan是需要减1，现象是：

  useEffect(() => {
    const doms = document.querySelectorAll('.devops-expanded .devops-ant-table-cell');
    if (doms.length) {
      doms.forEach((_: any) => {
        _.colSpan = columns.length - 1;
      });
    }
  }, [columns]);

前端新手小白的第一篇博客，就写到这里啦~~