Ant Design Vue 动态加载树形表格

Ant Design Vue 动态加载树形表格,第1张

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


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
}

效果如图

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/941494.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-17
下一篇2022-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存