组件库：antd 官网：[https://ant.design/docs/react/introduce-cn](https://ant.design/docs/react/introduce-cn) <br/> 处理表格时，跨行和跨列一直是绕不开的。前几天刚好有个表格要求做跨行处理，参考了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; }) ``` 到此跨行处理就结束了，这样你怎么增加或删减数据（顺序不能乱），都能实现动态跨行了。跨列以及跨行+跨列放在后面遇到再补充。