动态单元格合并---antd的table组件-蒲公英云

动态单元格合并---antd的table组件

怎么合并

antd提供了河边单元格的功能，支持合并行和列。以合并行为例，将第一行的高度rowSpan设置为2，其下一行高度设置为0，这样就实现了两行单元格合并，多行和列colSpan合并同理，给一个单元格设置值为要合并的行数，其余待合并为0，即可合并。

动态合并场景

以工作中的实际场景为例，用户通过表格维护所有门店的外卖信息，有的门店只有一个渠道，有的门店有两个渠道，以后不排除多个渠道；表格要以门店的维度进行数据展示，用户可以在渠道的维度进行数据操作，同时后端返回的数据以渠道的维度返回工作量相对较少，前后端数据结构的拼装解析相对更容易些。在这种情况下，前端需要将相同门店（数据已排序，相同门店数据紧挨着）的门店名称、编码等信息进行单元格合并展示。效果如下：

怎么动态合并

数据后端返回时，已经做了排序，统一门店的数据紧挨着一起，前端不需要考虑排序的问题，当然，做起来也很容易。回到合并问题上来，数据是以数组的形式返回，前端需要做的是对数据进行遍历比较，重复值的一个值所在行高度为重复的次数，其他重复的值所在行高度为0，不重复的行高为1。

实现方案

定义一个全局变量，存放当前重复的值，用来统计重复个数，为了实现多列的需求，需要存放多列的重复值，在避免多个全局变量的前提下，定义一个全局对象temp={}，通过temp[col1]、temp[col2]存放不同列的重复值。
定义一个方法mergeCells，判断值的重复个数，并返回当前行的高度。

怎么实现

/** * dataList为后端返回的数组 **/
const temp = { }; // 当前重复的值,支持多列
const mergeCells = (text, array, columns) => { 
  let i = 0;
  if (text !== temp[columns]) { 
    temp[columns] = text;
    array.forEach((item) => { 
      if (item.storeId === temp[columns]) { 
        i += 1;
      }
    });
  }
  return i;
};
// 表格部分省略部分代码，直接从render方法开始写
title: '门店编码',
dataIndex: 'storeCode',
key: 'storeCode'
render: (text, record) => { 
  const obj = { 
    children: text,
    props: { },
  };
  obj.props.rowSpan = mergeCells(record.storeId, dataList, 'storeCode');
  return obj;
},