ant-design-pro protable 树形表格默认展开

Protable 是在antd 的 table 上进行了一层封装,antd -table中有的属性它都支持. 当表格数据中有children字段,table会默认生成树形可展开表格,有时候需要一开始就默认展开,文档有一个属性defaultExpandAllRows默认展开所有行,但是设置这个之后并没有生效,原因是这个属性只在初始的时候加载一次,一般数据是从后台请求的,当时数据还没回来,数据回来时这个属性已经不会再次更新了.

如果是使用antd 的table,可以在表格元素加一个判断,数据存在在渲染

const Tree: React.FC = () => {
  const [treeData, setTreeData] = useState([])
  const getData = () => {
    setTimeout(() => {
      setTreeData(data)
    }, 2000);
  }

  useEffect(() => {
    getData()
  }, [])

  return (<>
    {(treeData && treeData.length) ?  <Table 
    columns={columns} 
    expandable={{defaultExpandAllRows: true}} 
    dataSource={treeData} /> : '暂无数据'}
  </>)
}

export default Tree

 

但是在Protable中这个方法并不适用,使用expandable的另一个属性defaultExpandedRowKeys可以达到这个效果,只是要多处理一次数据

const Tree: React.FC<{}> = () => {
  const [treeData, setTreeData] = useState([])
  const [defaultExpanded, setDefaultExpanded] = useState([])

  const actionRef = useRef<ActionType>();
  const getData = () => {
    return new Promise((resolve, reject) => {
      setTreeData(data)
      const newExpandedKeys = []
      const render = (treeDatas) => { // 获取到所有可展开的父节点
        treeDatas.map(item => {
          if (item.children) {
            newExpandedKeys.push(item.key)
            render(item.children)
          }
        })
        return newExpandedKeys
      }
      setDefaultExpanded(render(data))
      resolve({
        data: data})
    })
  }

  useEffect(() => {
    getData()
  }, [])

  return (<>
     {(treeData && treeData.length) ? <ProTable<TableListItem>
        headerTitle="查询表格"
        rowKey="key"
        actionRef={actionRef}
        expandable={{defaultExpandedRowKeys: defaultExpanded}}
        columns={columns}
        rowSelection={{}}
        request={() => getData()}
      /> : '暂无数据'
     }
  </>)
}

获取到数据后,把有children的父节点提取出来放在一个数组里,赋值给defaultExpandedRowKeys默认展开的节点属性,这样就实现默认全部展开的效果了