怎么合并

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

动态合并场景

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

antdesign table表头不换行_table

怎么动态合并

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

动态合并就实现了。