需求：由于后端一次性返回樹形數(shù)據(jù)太過龐大，現(xiàn)需要做到table tree樹形表格點(diǎn)擊展開再動(dòng)態(tài)獲取子節(jié)點(diǎn)

image.png

Antd是一個(gè)強(qiáng)大的組件庫，table tree幫我們提供了一個(gè)點(diǎn)擊展開按鈕的方法onExpand

image.png

<Table
    rowKey='id'
    dataSource={data}
    onExpand={this.handldOnExpand}
    columns={[
      { title: 'Name', dataIndex: 'name' },
      { title: 'Age', dataIndex: 'age' },
      { title: 'Address', dataIndex: 'address' }
    ]}
  />

找到當(dāng)前要展開的節(jié)點(diǎn)（用find方法），插入children節(jié)點(diǎn)

handldOnExpand = (expanded, record) => {
  const id = record.id
  const data = this.state.data

  const dataMap = (items) => {
    items.find((item) => {
      if (item.id === id) {
        //找到當(dāng)前要展開的節(jié)點(diǎn)
        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ù)自己項(xiàng)目發(fā)送請求的方法發(fā)送請求
  this.props.request({
      fetch:'你的url',
      params:{id: id},
      success: (res) => {
        //獲取到的子節(jié)點(diǎn)       
        const children = res.data || []
        const dataMap = (items) => {
          items.find((item) => {
            if (item.id === id) {
              //找到當(dāng)前要展開的節(jié)點(diǎn)
              item.children = children
              return items
            }
            if (item.children && item.children.length > 0) {
              dataMap(item.children)
            }
          })
        }
        dataMap(data || [])
      
        this.setState({
          data
        })
      }
    })
  
}

tips: 簡書上交流可能會(huì)看不到消息，如有問題，歡迎進(jìn)群交流50063010