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

谁践踏了优雅 2022-05-09 03:56 1107阅读 0赞

### 怎么合并 ###

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

### 动态合并场景 ###

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

![0065uj2jly1fveyerdaf4j30h702dweb.jpg][]

### 怎么动态合并 ###

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

### 实现方案 ###

1.  定义一个全局变量，存放当前重复的值，用来统计重复个数，为了实现多列的需求，需要存放多列的重复值，在避免多个全局变量的前提下，定义一个全局对象`temp={}`，通过`temp[col1]`、`temp[col2]`存放不同列的重复值。
2.  定义一个方法`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;
    },

动态合并就实现了。

[0065uj2jly1fveyerdaf4j30h702dweb.jpg]: /images/20220509/937ee72bc69d448aafa63e21322a37b6.png