antd动态的表格合并(包含排序功能)

主要是两个步骤,

1.处理接口返回数据,给其添加两个属性,一个是合并行数(列数),一个是当前数据的序号

2.在columns结合antd官网的处理方法合并表格

3.尽可能得减少计算量

 

数据处理函数

 

/**
 * 表单表头合并
 * @param list 需要遍历的数组
 * @param key  合并依赖的字段名
 */
//主要赋予两个属性,一个是total:该条数据占几行    number:该条数据的序号
export const getTotal = (list, key) => {
  let number = 0;
  let lastMenber = 0;
  list?.map((item, index) => {
    if (index !== 0 && index !== list.length - 1) {
      if (item[key] != list[index - 1][key]) {
        if (number === 0) {
          //total表示该数据占几行
          list[0].total = index;
          lastMenber = index;
        } else {
          list[lastMenber].total = index - lastMenber;
          lastMenber = index;
        }
        number += 1;
      } else {
        item.total = 0;
      }
    } else if (index === list.length - 1) {
      if (index !== 0 && item[key] != list[index - 1][key]) {
        list[lastMenber].total = list.length - 1 - lastMenber;
        item.total = 1;
        lastMenber = 0;
        number += 1;
      } else {
        list[lastMenber].total = list.length - lastMenber;
        lastMenber = 0;
      }
    }
    //number表示序号
    item.number = number;
  });
  return list;
};

 

 

 

 columns（哪些字段需要合并的，就加上render去处理）

const columns = [
  {
    title: '序号',
    dataIndex: 'rowNo',
    key: 'rowNo',
    render: (text, record, index) => {
      const obj = {
        children: record.number + 1,
        props: {},
      };
      if (record.total) {
        obj.props.rowSpan = record.total;
      } else {
        obj.props.rowSpan = 0;
      }
      return obj;
    },
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    render: (text, record) => {
      const content = (
        <span
          style={{ color: '#00aa4f', border: 0, cursor: 'pointer' }}
        >
          {text}
        </span>
      );
      const obj = {
        children: content,
        props: {},
      };
      if (record.total) {
        obj.props.rowSpan = record.total;
      } else {
        obj.props.rowSpan = 0;
      }
      return obj;
    },
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render: (text, record) => {
      const obj = {
        children: text,
        props: {},
      };
      if (record.total) {
        obj.props.rowSpan = record.total;
      } else {
        obj.props.rowSpan = 0;
      }
      return obj;
    },
  },
  {
    title: '性别',
    dataIndex: '性别',
    key: '性别',
    render: (text, record) => {
      const obj = {
        children: text,
        props: {},
      };
      if (record.total) {
        obj.props.rowSpan = record.total;
      } else {
        obj.props.rowSpan = 0;
      }
      return obj;
    },
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    render: (text, record) => {
      const obj = {
        children: text,
        props: {},
      };
      if (record.total) {
        obj.props.rowSpan = record.total;
      } else {
        obj.props.rowSpan = 0;
      }
      return obj;
    },
  },
  {
    title: '当前状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '结果',
    dataIndex: 'result',
    key: 'result',
  },
];

 table组件（合并所有姓名相同的数据）

<Table
columns={columns}
dataSource={getTotal(list, 'name')}
></Table>