需求：由于后端一次性返回樹形數(shù)據(jù)太過龐大，現(xiàn)需要做到table tree樹形表格點擊展開再動態(tài)獲取子節(jié)點
image.png
Antd是一個強大的組件庫拓劝，table tree幫我們提供了一個點擊展開按鈕的方法onExpand
image.png
根據(jù)onExpand第二個參數(shù)record我們可以得到當前要展開的節(jié)點雏逾，根據(jù)當前節(jié)點獲取子節(jié)點，再插入表格數(shù)據(jù)中郑临，重新渲染表格
<Table
rowKey='id'
dataSource={data}
onExpand={this.handldOnExpand}
columns={[
{ title: 'Name', dataIndex: 'name' },
{ title: 'Age', dataIndex: 'age' },
{ title: 'Address', dataIndex: 'address' }
]}
/>
找到當前要展開的節(jié)點（用find方法），插入children節(jié)點
handldOnExpand = (expanded, record) => {
const id = record.id
const data = this.state.data
const dataMap = (items) => {
items.find((item) => {
if (item.id === id) {
//找到當前要展開的節(jié)點
item.children = [{name: 'aoli', age: '12', address: '深圳'}]
return items
}
if (item.children && item.children.length > 0) {
dataMap(item.children)
}
})
}
dataMap(data || [])
//重新渲染表格
this.setState({
data
})
}
handldOnExpand完整處理代碼
handldOnExpand = (expanded, record) => {
if(!expanded) return //如果是關(guān)閉就返回
if(record.children && record.children.length > 0) return //如果已經(jīng)有數(shù)據(jù)就返回
const id = record.id
const data = this.state.data
//發(fā)送請求,該請求我已經(jīng)自行封裝過屑宠，不可照搬厢洞。請根據(jù)自己項目發(fā)送請求的方法發(fā)送請求
this.props.request({
fetch:'你的url',
params:{id: id},
success: (res) => {
//獲取到的子節(jié)點
const children = res.data || []
const dataMap = (items) => {
items.find((item) => {
if (item.id === id) {
//找到當前要展開的節(jié)點
item.children = children
return items
}
if (item.children && item.children.length > 0) {
dataMap(item.children)
}
})
}
dataMap(data || [])
this.setState({
data
})
}
})
}
tips: 簡書上交流可能會看不到消息，如有問題，歡迎進群交流50063010
