react: ant-design中关于table的合并与分页并存所产生的问题

• 功能
  table 使用过程中，融合 table 表格的合并和分页
• 产生的问题
  合并后的表格，在分页的时候，表格内容错行
• 错位图
  

··· 处理过程 ···

1. 关于表格列的配置：

点击查看代码

columns = [
  {title: '情况',
    children:[
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        render(val, row, index) {
           children: <span>{row.name? row.name:''}</span>
            props: {rowSpan: row.rowSpan}
        }
      }
    ]
  }
]

2. 对数据分页，对表格合并

点击查看代码

mergeRows = (data) => {
    if (!data) return
    let {pageSize} = this.state
    let leng = data.length,res =[]
    // 对原有数据进行分页
    for (let i = 0; i< leng; i+= pageSize) {
        res.push(data.slice(i, i+pageSize))
    }
    var newResult = [], oldResult=[]
    for (let i =0; i< res.length; i++) {
        // 获取数据中所查属性相同的值
        res[i].reduce((result, item) =>{
            if (!result.includes(item.name)) {
                result.push(item.name)
            }
            return result
        }, []).reduce((result, name) => {
            // 对每条数据进行添加rowSpan
            const child = res[i].filter(item => item.name === name)
            oldResult = result.concat(
                child.map((item, index) => ({
                    ...item,
                    rowSpan: index === 0? child.length : 0
                }))
            )
            return oldResult
        }, [])
        newResult.push(...oldResult)
    }
    return newResult
}

 总结思路： 问题导出：后台返回的数据，进行行列合并之后，换页时会存在table错位
        2.ant-design官方网站指出： 表格支持行列合并，使用render里的单元格属性colSpan或者rowSpan
          设置为0时，设置的表格不会渲染---导致问题的关键
        3.所以我们需要动态的为每一条数据添加rowSpan，当它需要合并的行或者列同名的有几个时，最开始的rowSpan便为几，剩下的为0
        4.设置好rowSpan,我们会发现分页的时候为0,表格不渲染就会错位
        5.于是先解决数据分页问题，再去动态修改数据，便会解决这个问题