ant design vue树形表格异步加载

1.表格结构如下：

<a-table
  ref="labelTable"
  :columns="labelColumns"
  :data-source="loadLabelData"
  :row-selection="rowSelection"
  :expanded-row-keys.sync="expandedRowKeys"
  :expandIcon="expandIcon"
  @expand="getChild"
 >
</a-table>

rowSelection：单元格可选，状态改变触发

expand：点击展开图标触发

expandIcon：图标自定义

2.下面是异步加载js代码：

// 表格点击获取子级
    getChild (expanded, record) {
      console.log(expanded, record)//expanded判断展开or收缩操作，record当前行数据
      if (expanded) {
        //异步调取接口获取数据
        tagAPI.getAddId({ tagId: record.iid, type: sessionStorage.getItem('activeKey')                     
      }).then(res => {
          if (res.success) {
            const data = this.loadLabelData
            const children = res.data.tagItemEntityList
            children.forEach((item) => {
              item.key = item.iid
           //hasChild为判断该对象扩展后是否有数据即是否能展开（这里可跟后端商量返回一个字                
        //段判断），若能则添加children（用来控制图标显示或隐藏）
              if (item.hasChild === 1) {
                item.children = []
              }
            })
            //循环判断，添加children子级
            const dataSourceMap = (items) => {
              items.find((item) => {
                if (item.iid === record.iid) {
                  // 找到当前要展开的节点
                  item.children = children
                  item.children.map((e) => {
                    //这里不用管，我是将tagLevel这个number数字转成中文
                    e.tagLevel = changeNumToHan(e.tagLevel)
                  })
                  return items
                }
                if (item.children && item.children.length > 0) {
                  dataSourceMap(item.children)
                }
              })
            }
            dataSourceMap(data)
            this.loadLabelData = [...this.loadLabelData]
            console.log('this.loadLabelData', this.loadLabelData)
          }
        })
      } else {
        //这里可添加收缩表格操作
      }
    },

注意：为了优化界面，不能一开始就给每个表格单元显示展开图标，万一有的点开后异步加载是空数据呢，所以这里需要跟后端商量，让他返给你一个字段，用来判断这级下面是否有数据，若有数据，则给这一级添加一个空的children，可以控制展开图标显示。

3.下面是图标的自定义方法：

expandIcon (props) {
      console.log(props)
      if (props.record.children) {
        if (props.expanded) {
          return (
            <span
              class="table-icon"
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
               //收缩图标
              <a-icon type="down" />
            </span>
          )
        } else {
          return (
            <span
              class="table-icon"
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
               //展开图标
              <a-icon type="right" />
            </span>
          )
        }
      } else {
        return <span style="margin-right:19px"></span>
      }
    },