react使用antd table合并单元格错位问题

在使用antd table组件时, 合并单元格导致错位, 在网上查阅了许多资料, 发现没有太多的参考价值。因为他们都以静态数据来展示合并单元格（行/列）。比如根据行索引设定rowSpan/colSpan。  因此写下这篇文章和大家分享

表单数据采用模拟请求数据, 不是固定数量的数据. 处理方法是公用的, 有需要的直接粘去。(最下面会讲哪个属性一改就可以直接用了)

说一下大体思路：

        1.  首先要明确哪些行要被合并, 计算一下。计算思路是根据某个字段， 比如性质，如果第1，2，3，4，5行性质相同，那就要合并第2，3，4，5行。antd提供了一个rowSpan属性，这个时候把第一行数据的rowSpan设置为5， 余下的2，3，4，5行 rowSpan设置为0。

        2. 有这个思路后，就处理数据， 我们假设下面是接口返回过来的数据

const data = [
            {
                "id": "0D3B496594AE423BBC6FBB056E272824",
                "property": 0,
                "index": "1"
            },
            {
                "id": "61272451951948C6856A1AB3C1A3B60C",
                "property": 1,
                "index": "2"
            },
            {
                "id": "74555E8E845B4851964BFE5730BE5605",
                "property": 0,
                "index": "3"
            },
            {
                "id": "572B656198E74FEB9C75C780825E34E5",
                "property": 1,
                "index": "4"
            },
            {
                "id": "B2BE7F221390459293E6544340FA32EB",
                "property": 2,
                "index": "5"
            },
            {
                "id": "D65AC901ACFA43B8A647739E7F4A0353",
                "property": 2,
                "index": "6"
            },
            {
                "id": "4ECDF797E351405AB91522875924E773",
                "property": 0,
                "index": "7"
            },
            {
                "id": "6AC3E905FE1A496BAF1CE848E8DED2CE",
                "property": 2,
                "index": "8"
            },
            {
                "id": "E7ED3DED0BFE499D94D49A57B2C10F0A",
                "property": 1,
                "index": "9"

            }
        ]

我们观察数据，第一条与第二条和第二条数据的性质相同，那么就要把要合并的单元格（第一行）设置一个属性， rowSpan：2； 被合并的单元格（第二行）设置一个属性，rowSpan： 0 。（被合并的单元格 rowSpan 一定要设置为0， 不然他的位置被上一行合并，他还不是0的情况下，他会被往右挤， 从而造成表格移位）

接下来上处理数据的代码：

const formatData = (data) => {
    let processedData = [...data];
    let prevFinishNum;
    let currentIndexForSameProperty;

    for (let i = 0; i < processedData.length; i++) {
        const currentItem = processedData[i];

        if (i === 0 || currentItem.property !== prevFinishNum) {
            // 新的组开始，重置计数器，并将上一组最后一项的rowSpan设置好
            if (prevFinishNum !== undefined && currentIndexForSameProperty !== undefined) {
                processedData[currentIndexForSameProperty].rowSpan = i - currentIndexForSameProperty;
            }
            currentIndexForSameProperty = i;
            currentItem.rowSpan = 1;
            currentItem.opcaty = '0'; // 标识是不是被合并的行
        } else {
            // 相同组内，累加rowSpan
            processedData[currentIndexForSameProperty].rowSpan += 1;
            currentItem.opcaty = '1'; // 标识是被合并的行
        }

        prevFinishNum = currentItem.property;
    }

    // 处理数组的最后一项
    if (currentIndexForSameProperty !== undefined && currentIndexForSameProperty < processedData.length - 1) {
        processedData[currentIndexForSameProperty].rowSpan = processedData.length - currentIndexForSameProperty;
    }

    return processedData;
};

这段代码的思路就是要合并单元格的那一行, 合并了几个单元格, 就将rowSpan设置为几, 方便后续使用 onCell属性设置。被合并的单元格要加一个标识，方便后期将其rowSpan值设置为0，从而避免表格错位移位。

最后上 antd table 的代码  

const columns = () => {
    return [
        {
                title: '单元格性质',
                dataIndex: 'property',
                onCell: mergeRow,
                width: 230
        },        
    ]
    
}

const mergeRow = (record, rowIndex) => {
        if (record.rowSpan > 1) {
            return {
                rowSpan: record.rowSpan
            };
        } else if (record.opcaty !== '0') {
            return {
                rowSpan: 0
            };
        }
};

这样就可以根据接口返回值,实时计算要合并几格, 从而避免像官网案例上是根据索引设置静态数据合并单元格.

效果图

注意： 处理数据的逻辑可以不看，可以当作公用方法，只需要保证传入的是一维数组, 并且将其中的property属性,换成你要判断是否合并的属性即可！！！！ 

——————————————————————————————————————————

ps:有问题可以评论或者联系我交流