React Antd 树形结构默认展开全部不生效问题

原创已于 2023-06-06 18:42:19 修改 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #vue.js #typescript #antd

于 2023-05-24 13:13:11 首次发布

文章描述了一个在使用ProTable组件时遇到的问题，即设置defaultExpandAllRows为true无法让表格在初始化时全展开。作者认为可能是由于异步问题导致的。最终，解决方案是通过使用expanded和onExpand受控属性来实现表格的默认全展开状态。

背景

有个需求需要设置属性表格在刚进入时默认为全展开的

踩坑

代码如下：
这里设置了defaultExpandAllRows: true，但是不生效
那同理defaultExpandedRowKeys应该也不行
应该是异步的问题

<ProTable
        scroll={{ x: 1100 }}
        headerTitle="x"
        rowKey={(record) => `${record.xlevel}#${record.xid}`}
        columns={columns as any}
        actionRef={actionRef}
        request={requestTable}
        search={{ defaultCollapsed: false }}
        toolBarRender={() => [<Create actionRef={actionRef.current} />]}
        expandable={{
          expandRowByClick: true,
          defaultExpandAllRows: true,
        }}
        form={{
          syncToUrl: (values) => values,
          syncToInitialValues: true,
          ignoreRules: false,
        }}
      />

在这里插入图片描述

解决

用 expanded：selectRowkeys + onExpand 受控实现
多看官方文档

React Antd 树形结构 默认展开全部不生效问题

背景

踩坑

解决

1 条评论

React Antd 树形结构默认展开全部不生效问题