Ant Design Table 可展开行显示在子项上方 调整配置咨询

问题原因 #

当 Ant Design Table 同时使用带children的树形嵌套数据源和expandedRowRender自定义展开行时，默认的展开行渲染位置为当前父行与子项集合之间，不符合预期。

解决方案 #

方案1（适用于 Ant Design v5.2.0 及以上版本）

直接在expandable配置中添加expandPosition: 'after'参数即可将展开行调整到所有子项下方，修改后的代码如下：

<Table
  columns={columns}
  dataSource={data}
  expandable={{
    expandPosition: 'after', // 新增这行配置即可
    rowExpandable: (record) => {
      console.log('record ', record);
      return record.children ? true : false;
    },
    expandIcon: ({ expanded, onExpand, record }) => {
      if(!record.children || record.children.length === 0) return null;
      return expanded ? (
        <DownOutlined onClick={e => onExpand(record, e)} />
      ) : (
        <RightOutlined onClick={e => onExpand(record, e)} />
      )           
    },
    expandedRowRender: (record, index, indent, expanded) => {
      console.log(record, index, indent, expanded);
      return <Button>Save</Button>;
    }
  }}
/>

方案2（适用于低于 v5.2.0 的低版本 Ant Design）

可以手动处理数据源实现需求：

• 把树形结构的数据源拍平为一维数组，额外给每一行记录添加level（层级）、parentId（父级记录id）、isExpandContent（是否为展开行内容）标记
• 自己维护展开状态，点击展开图标时，将对应父行的展开内容行插入到该父行所有子项的末尾，点击收起时删除对应展开内容行
• 渲染时根据level自定义行缩进效果，匹配原有树形结构的视觉表现

内容的提问来源于stack exchange，提问作者Rashmi