Antd树形表格Table tree子节点动态异步获取

需求：由于后端一次性返回树形数据太过庞大，现需要做到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