ant design-Table組件實現每一行某個特定字段連續相同進行行合並。

需求：表格數據，要求后台返回的數據中，每一行客戶姓名連續相同時進行行合並。

需求原型：

 

 解決方案：

首先看ant Table官網的demo，如何實現行合並：

import { Table } from 'antd';

// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    props: {},
  };
  if (index === 4) {
    obj.props.colSpan = 0;
  }
  return obj;
};

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text, row, index) => {
      if (index < 4) {
        return <a>{text}</a>;
      }
      return {
        children: <a>{text}</a>,
        props: {
          colSpan: 5,
        },
      };
    },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    render: renderContent,
  },
  {
    title: 'Home phone',
    colSpan: 2,
    dataIndex: 'tel',
    render: (value, row, index) => {
      const obj = {
        children: value,
        props: {},
      };
      if (index === 2) {
        obj.props.rowSpan = 2;
      }
      // These two are merged into above cell
      if (index === 3) {
        obj.props.rowSpan = 0;
      }
      if (index === 4) {
        obj.props.colSpan = 0;
      }
      return obj;
    },
  },
  {
    title: 'Phone',
    colSpan: 0,
    dataIndex: 'phone',
    render: renderContent,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    render: renderContent,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: [phone],
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: [phone],
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: [phone],
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: [phone],
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: [phone],
    address: 'Dublin No. 2 Lake Park',
  },
];

ReactDOM.render(<Table columns={columns} dataSource={data} bordered />, mountNode);

　　

 

 demo核心代碼：

 

 如上圖所示，demo中哪一行進行行合並是固定寫死的，那如何實現后台數據客戶姓名字段連續相同時合並呢。

代碼如下：

/**
 * @param {*} data   [后台數據]
 * @param {*} key    [要合並的字段]
 * @param {*} target [后台數據對應的index]
 * @returns 合並的行數
 * method of 獲取合並的行數
 */
function getRowSpanCount(data, key, target) {
  if (!Array.isArray(data)) return 1;
  data = data.map(_ => _[key]); // 只取出篩選項
  let preValue = data[0];
  const res = [[preValue]]; // 放進二維數組里
  let index = 0; // 二維數組下標
  for (let i = 1; i < data.length; i++) {
    if (data[i] === preValue) { // 相同放進二維數組
      res[index].push(data[i]);
    } else { // 不相同二維數組下標后移
      index += 1;
      res[index] = [];
      res[index].push(data[i]);
      preValue = data[i];
    }
  }
  const arr = [];
  res.forEach((_) => {
    const len = _.length;
    for (let i = 0; i < len; i++) {
      arr.push(i === 0 ? len : 0);
    }
  });
  return arr[target];
}

如何調用：

 

 頁面效果：