这是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
}
效果如图
|