需求：由于后端一次性返回树形数据太过庞大，现需要做到table tree树形表格点击展开再动态获取子节点
image.png
Antd是一个强大的组件库，table tree帮我们提供了一个点击展开按钮的方法onExpand
image.png
根据onExpand第二个参数record我们可以得到当前要展开的节点，根据当前节点获取子节点，再插入表格数据中，重新渲染表格
<Table
rowKey='id'
dataSource={data}
onExpand={this.handldOnExpand}
columns={[
{ title: 'Name', dataIndex: 'name' },
{ title: 'Age', dataIndex: 'age' },
{ title: 'Address', dataIndex: 'address' }
]}
/>
找到当前要展开的节点（用find方法），插入children节点
handldOnExpand = (expanded, record) => {
const id = record.id
const data = this.state.data
const dataMap = (items) => {
items.find((item) => {
if (item.id === id) {
//找到当前要展开的节点
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 //如果是关闭就返回
if(record.children && record.children.length > 0) return //如果已经有数据就返回
const id = record.id
const data = this.state.data
//发送请求,该请求我已经自行封装过，不可照搬。请根据自己项目发送请求的方法发送请求
this.props.request({
fetch:'你的url',
params:{id: id},
success: (res) => {
//获取到的子节点
const children = res.data || []
const dataMap = (items) => {
items.find((item) => {
if (item.id === id) {
//找到当前要展开的节点
item.children = children
return items
}
if (item.children && item.children.length > 0) {
dataMap(item.children)
}
})
}
dataMap(data || [])
this.setState({
data
})
}
})
}
tips: 简书上交流可能会看不到消息，如有问题，欢迎进群交流50063010
