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 (支持父级点击展示子行)

 setRowClassName(record)}
   rowKey={record => record.id}
   expandIcon={expandIcon}
   expandedRowKeys={expandedRowKeys}
   expandRowByClick
   pagination={false}
/>

2.3.修改默认的折叠图标

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

Antd4 Table组件折叠收缩功能_第1张图片

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

    if (id) {
      return expanded ? (
        
      ) : (
        
      );
    }
    return '';
  };

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

expandedRowKeys使用

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

Antd4 Table组件折叠收缩功能_第2张图片

点击折叠收起来,使用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控制点击箭头时状态

setRowClassName(record)} rowKey={record => record.id} expandIcon={expandIcon} expandedRowKeys={expandedRowKeys} expandRowByClick onExpandedRowsChange={expandedRows => { setExpendRowKeys([...expandedRows]); }} pagination={false} />

 Last,希望能帮助大家,越努力越幸运~

你可能感兴趣的:(react,antd,前端,reactjs)