antd表格跨行处理(动态数据)

组件库：antd
官网：https://ant.design/docs/react/introduce-cn

处理表格时，跨行和跨列一直是绕不开的。前几天刚好有个表格要求做跨行处理，参考了ant design官方文档后，明白了主要原理是令 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0，使设置的表格不会渲染，来达到跨行跨列的目的。
既然要根据数据动态实现跨行处理，那么就不能在columns里面写死。不过表格列的配置columns作为一个数组，js里面通用的数组方法我们都可以用。所以我们可以在render () 里面对列进一步处理后，来进行数据展示。
要出现的效果如图所示：

先声明此次处理的表格数据必须是根据要跨行的值来顺序排列，比如：

let dataSource = [
    {
        region:"区域一",
        task:"打扫111"
    },
    {
        region:"区域一",
        task:"捡垃圾222"
    },
    {
        region:"区域二",
        task:"扫树叶333"
    }
]

这种数据的排序后台是很容易给的，也能大幅减少前端工作量。
注意不要是这种数据：

let dataSource = [
    {
        region:"区域一",
        task:"打扫111"
    },
    {
        region:"区域二",
        task:"扫树叶333"
    },
    {
        region:"区域一",
        task:"捡垃圾222"
    }
]

这样的数据如果要分区域来跨行，即使不是动态数据都不太好处理。
在实际中，我们并不知道要从哪一行开始跨，更不知道跨几行，因为数据是动态的。所以首先要明确从哪个下标开始跨，方式如下：

let regionObj = {}, regionIndex = 0, regionName = '';
// 对表格数据循环检查，下标为0时至少rowSpan=1，所以第一次跨行处理一定是index=0的时候
dataSource.map((val, ind)=>{
    if(ind === 0) {
        // 初始化region的名称，regionObj要做第一次跨行处理
        regionName = val.region;
        regionObj[regionName] = regionIndex;
    };
    // 当region名称不重复时意味着跨行结束，新的跨行开始
    if(val.region === regionName){
        regionIndex = ind;
    }else{
        // 新的跨行，更新下标和名称，存入regionObj
        regionName = val.region;
        regionIndex = ind;
        regionObj[regionName] = regionIndex;
    }
})

其中regionObj如果根据上面的数据打印出来应该是：

regionObj = { 
    "区域一":0,
    "区域二":2
}

0和2就是要开始跨的下标，接下来解决跨几行的问题，就是在columns里面处理：

columns = columns.map((value, index) => {
    if(index === 0){    // 要跨行的列下标，此次要处理的是region列
        value.render = (text, record, index) => {
            let obj = {
                children: text,
                props: {},
            }
            if(index === regionObj[text]){  // 从上方的regionObj可以得到从哪开始跨
                let flag = 0;   
                // flag表示跨几列，每当有region名相同，flag++
                dataSource.map((val, ind)=>{
                    if(val.region === text){
                        flag ++;
                    }
                })
                obj.props.rowSpan = flag;
            }
            else {  // 注意跨行后，被合并的都要设为0
                obj.props.rowSpan = 0;
            }
            return obj
        }
    }
    value.width = 150;
    value.align = 'center';
    return value;
})

到此跨行处理就结束了，这样你怎么增加或删减数据（顺序不能乱），都能实现动态跨行了。跨列以及跨行+跨列放在后面遇到再补充。