在web開發中，表格的行合併是一個很常見的需求。antd也提供了這種功能，但是文件中的示例程式碼卻和我想象中的相差甚遠，如下所示，它是通過一種很笨的辦法實現的行合併。這樣當表格的資料來源是動態獲取的，我們就沒有辦法動態的合併行。

官方程式碼

螞蟻框架的官方文件程式碼，我的程式碼見最後

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 href="javascript:;"
 
>{text}</a>;
    }
    return {
      children: <a href="javascript:;">{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: 18889898989,
  address: 'New York No. 1 Lake Park',
}, {
  key: '2',
  name: 'Jim Green',
  tel: '0571-22098333',
  phone: 18889898888,
  age: 42,
  address: 'London No. 1 Lake Park',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  tel: '0575-22098909',
  phone: 18900010002,
  address: 'Sidney No. 1 Lake Park',
}, {
  key: '4',
  name: 'Jim Red',
  age: 18,
  tel: '0575-22098909',
  phone: 18900010002,
  address: 'London No. 2 Lake Park',
}, {
  key: '5',
  name: 'Jake White',
  age: 18,
  tel: '0575-22098909',
  phone: 18900010002,
  address: 'Dublin No. 2 Lake Park',
}];

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

動態合併行程式碼示例

因為在網上也沒有找到合適的解決方案，所以把自己的實現分享出來，希望對大家有所幫助。

線上演示

表格資料中被合併的列應該是經過排序的，保證所有相同的行都呆在一起能夠被合併

const { Table } = 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: {},
  };
  return obj;
};


const data = [{
  key: '1',
  name: 'A',
  age: 32,
  tel: '0571-22098909'
}, {
  key: '2',
  name: 'A',
  age:12,
  tel: '0571-22098333'
}, {
  key: '3',
  name: 'B',
  age: 32,
  tel: '0575-22098909'
}, {
  key: '4',
  name: 'B',
  age: 18,
  tel: '0575-22098909'
}, {
  key: '5',
  name: 'B',
  age: 18,
  tel: '0575-5'
}, {
  key: '6',
  name: 'C',
  tel: '0571-6',
  age:12
}, {
  key: '7',
  name: 'C',
  tel: '0571-7',
  age:19
}];

var myArray=new Array(data.length);

console.error(data.length);


var func =(data)=>{
  //儲存上一個name
  var x = "";
  //相同name出現的次數
  var count = 0;
  //該name第一次出現的位置
  var startindex=0;

  for(var i = 0;i<data.length;i++){
    //這裡是合併name列，根據各自情況大家可以自己完善
    var val = data[(i)].name;
    if(i==0){
      x=val;
      count=1;
      myArray[0]=1
    }else{
      if(val==x){
        count++;
        myArray[startindex]=count;
        myArray[i]=0
      }else{
        count = 1;
        x=val;
        startindex=i;
        myArray[i]=1
      }
    }
  }
}

func(data)
console.table(myArray)

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  render: (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    obj.props.rowSpan = myArray[index];
    return obj
  },
}, {
  title: 'Age',
  dataIndex: 'age',
  render: renderContent,
}, {
  title: 'Home phone',
  dataIndex: 'tel',
  render: renderContent,
}];


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