react开发之arco design合并列

前言

最近开发项目过程中，需要用到表格合并行的功能。由于我采用的是arco design组件，所以自带支持的行列合并，我其实需要的列合并列，如下图。

组件代码

import { Button } from '@arco-design/web-react';
import { Space } from '@arco-design/web-react';
import { Table } from '@arco-design/web-react';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (col, item, index) => {
      const obj = {
        children: col,
        props: {}
      };

      if (item?.rows?.length) {
        obj.props.colSpan = 4;
      }

      return obj;
    }
  },
  {
    title: 'Salary',
    dataIndex: 'salary',
    render: (col, item, index) => {
      const obj = {
        children: col,
        props: {}
      };

      if (item?.rows?.length) {
        obj.props.colSpan = 0;
      }

      return obj;
    }
  },
  {
    title: 'Detail',
    dataIndex: 'address',
    render: (col, item, index) => {
      const obj = {
        children: col,
        props: {}
      };

      if (item?.rows?.length) {
        obj.props.colSpan = 0;
      }

      return obj;
    }
  },
  {
    title: 'Email',
    dataIndex: 'email',
    render: (col, item, index) => {
      const obj = {
        children: col,
        props: {}
      };

      if (item?.rows?.length) {
        obj.props.colSpan = 0;
      }

      return obj;
    }
  },
  {
    title: '操作',
    dataIndex: 'op',
    width: '160px',
    render: (_, record) => {
      return (
        <Space>
          <Button onClick={() => onEdit(record)} size='small'>
            修改
          </Button>
          <Button onClick={() => onDel(record)} size='small'>
            删除
          </Button>
        </Space>
      );
    }
  }
];

const data = [
  {
    key: '1',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com',
    rows: [
      {
        key: '1-1',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com'
      },
      {
        key: '1-2',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com'
      }
    ]
  },
  {
    key: '2',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com'
  },
  {
    key: '3',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com'
  },
  {
    key: '4',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com'
  },
  {
    key: '5',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com',
    rows: [
      {
        key: '5-1',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com'
      },
      {
        key: '5-2',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com'
      }
    ]
  },
  {
    key: '6',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com'
  },
  {
    key: '7',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com'
  },
  {
    key: '8',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com'
  },
];

const TreeTable = () => {
  return <Table border borderCell hover columns={columns} data={data} pagination={false} />;
};

export default TreeTable;

核心说明：

// 只要有子节点就合并整列
if (item?.rows?.length) {
   obj.props.colSpan = 4;
}