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默認展開的節點屬性,這樣就實現默認全部展開的效果了