Ant Design Vue 动态加载树形表格

这是vue3的写法，vue2改一下格式就ok

<a-table @expand="expandCustomRow"/>

const expandCustomRow = async (expanded, record) => {
  if (!expanded) return
  const id = record.id
  const data = zidataSource.value;
  // 请求接口(用的时候换成自己的写法)
  const res = await $http.get(`${capiBase}`, {
    params: {
      pid: record.id,
    },
  })
  if (res.code === '0') {
    //获取到的子节点
    const children = res.list || []
    // children.forEach((opt) => {
    //   // 如果children为空 不显示展开icon
    //   try {
    //     if (opt.children.length === 0) {
    //       delete opt.children
    //     }
    //   } catch (err) {}
    // })
    // 如果数据有children字段，就不需要下面这句
    children.forEach((item) => {
      item.children = []
    })
    const dataSourceMap = (items) => {
      items.find((item) => {
        if (item.id === id) {
          //找到当前要展开的节点
          item.children = children
          return items
        }
        if (item.children && item.children.length > 0) {
          dataSourceMap(item.children)
        }
      })
    }
    dataSourceMap(data || [])
    setDataSource(data)
  } else {
    message.error(res.message)
  }
}
const setDataSource = (data) => {
  zidataSource.value = data
}

效果如图