Protable 是在antd 的 table 上進(jìn)行了一層封裝,antd -table中有的屬性它都支持. 當(dāng)表格數(shù)據(jù)中有children字段,table會(huì)默認(rèn)生成樹形可展開表格,有時(shí)候需要一開始就默認(rèn)展開,文檔有一個(gè)屬性defaultExpandAllRows默認(rèn)展開所有行,但是設(shè)置這個(gè)之后并沒有生效,原因是這個(gè)屬性只在初始的時(shí)候加載一次,一般數(shù)據(jù)是從后臺(tái)請(qǐng)求的,當(dāng)時(shí)數(shù)據(jù)還沒回來,數(shù)據(jù)回來時(shí)這個(gè)屬性已經(jīng)不會(huì)再次更新了.

如果是使用antd 的table,可以在表格元素加一個(gè)判斷,數(shù)據(jù)存在在渲染

const Tree: React.FC = () =>{

const [treeData, setTreeData]=useState([])

const getData= () =>{

setTimeout(()=>{

setTreeData(data)

},2000);

}

useEffect(()=>{

getData()

}, [])return (<>{(treeData&& treeData.length) ?

columns={columns}

expandable={{defaultExpandAllRows: true}}

dataSource={treeData} /> : '暫無數(shù)據(jù)'}

>)

}

exportdefault Tree

但是在Protable中這個(gè)方法并不適用,使用expandable的另一個(gè)屬性defaultExpandedRowKeys可以達(dá)到這個(gè)效果,只是要多處理一次數(shù)據(jù)

const Tree: React.FC =

總結(jié)

以上是生活随笔為你收集整理的antd 表格树如何展开_ant-design-pro protable 树形表格默认展开的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。