Antd4 Table组件折叠收缩功能

hi～最近应业务需求实现一个基本的订单查询类功能，分为表单搜索框和列表展示两部分，根据表单搜索查询列表接口展示数据，Form和Table组件大家估计也玩烂了。今天记录下react项目如何实现Table默认展示订单列表，且订单有父子级展示，点击父级箭头实现折叠收缩功能。

1.去官网扒一波要用到的api：

defaultExpandAllRows	初始时，是否展开所有行
expandedRowKeys	展开的行，控制属性
expandRowByClick	通过点击行来展开子行

onExpand	点击展开图标时触发
onExpandedRowsChange	展开的行变化时触发

根据这5个api可以实现我们的需求功能，前三个必须要使用，后2个选一个即可。

2.接下来直接上代码小试牛刀吧～
   2.1.首先在文件里面引入antd的table组件，如下图所示：

import { Table, Pagination } from 'antd';

  2.2.使用Table组件，主要代码：

   expandIcon={expandIcon} （修改默认的+号按钮，改为箭头展示）
   expandedRowKeys={expandedRowKeys} （控制当前点击按钮的受控状态）
   expandRowByClick （支持父级点击展示子行）

<Table
   size="small"
   bordered={false}
   columns={columns}
   dataSource={tableList}
   loading={tableLoading}
   rowClassName={record => setRowClassName(record)}
   rowKey={record => record.id}
   expandIcon={expandIcon}
   expandedRowKeys={expandedRowKeys}
   expandRowByClick
   pagination={false}
/>

2.3.修改默认的折叠图标

官网默认的折叠图标如下图所示：

  const expandIcon = prop => {
    const { expanded, record } = prop;
    const { children, id } = record;
    if (!children || children.length === 0) {
      return '';
    }

    if (id) {
      return expanded ? (
        <CaretDownOutlined translate="true" style={{ cursor: 'pointer' }} />
      ) : (
        <CaretRightOutlined translate="true" style={{ cursor: 'pointer' }} />
      );
    }
    return '';
  };

修改后的折叠图标且默认展示子行订单如下图所示：

expandedRowKeys使用

const [expandedRowKeys, setExpendRowKeys] = useState([]);
 useEffect(() => {
    const newOrderArr = list.map(item => item.id);
    setExpendRowKeys([...newOrderArr]);
 }, [list]);

点击折叠收起来，使用api二选一，如下图所示：

第一种方法：
onExpandedRowsChange={expandedRows => {
    setExpendRowKeys([...expandedRows]);
}}

第二种方法：
onExpand={(expend, record) => {
  if(expend) {
     const newOrderArr = list.map(item => item.id);
     setExpendRowKeys([...newOrderArr]);
  } else {
    const index = expandedRowKeys.findIndex((e) => e === record.id);
    const newArray = [...expandedRowKeys];
    newArray.splice(index, 1);
    setExpendRowKeys(newArray);   
 }}}

3.当前使用的第一种，大概实现思路就是这样，主要以expandedRowKeys控制点击箭头时状态

<Table
   size="small"
   bordered={false}
   columns={columns}
   dataSource={tableList}
   loading={tableLoading}
   rowClassName={record => setRowClassName(record)}
   rowKey={record => record.id}
   expandIcon={expandIcon}
   expandedRowKeys={expandedRowKeys}
   expandRowByClick
   onExpandedRowsChange={expandedRows => {
       setExpendRowKeys([...expandedRows]);
   }}
   pagination={false}
/>

 Last，希望能帮助大家，越努力越幸运～