我们在使用Avue组件的时候,会用到树这种结构,但是树的懒加载子节点不刷新问题官方并没有告诉我们怎么做,下面是解决办法。
树结构懒加载子节点不刷新
data
首先在data创建一个map
data(){
maps: new Map()
}
子节点
treeLoad(tree, treeNode, resolve) {
const parentId = tree.id;
//将当前节点存到maps里面
this.maps.set(parentId, {tree , treeNode, resolve})
getLazyList(parentId).then(res => {
resolve(res.data.data);
});
},
保存方法
rowSave(row,done,loading) {
add(row).then(() => {
// 获取新增数据的相关字段
this.$message({
type:'success',
message:'操作成功'
});
//数据回调进行刷新
done(row);
//在表格数据实时更新后引用maps的数据,动态更新子节点的内容
this.maps.forEach((item, key) => {
const {tree, treeNode, resolve} = this.maps.get(key)
this.treeLoad(tree, treeNode, resolve)
})
},error => {
window.console.log(error);
loading();
});
},
表格的树形结构懒加载
{
label:'籍贯',
prop: 'nativePlace',
type:'tree',
dicData: [],
dicUrl:'/api/blade-system/region/lazy-tree?parentCode={{key}}',
props:{
label:"title",
value: "id"
},
lazy:true,
change: ({ value }) => {
// 联动下一级
this.getRegionLazyTree(value);
// 调取父及数据接口,避免再次点击没有数据
this.getRegionLazyTree("00")
},
treeLoad: (node, resolve)=> {
const parentCode = (node.level === 0 ) ? "00" : node.data.id;
getRegionLazyTree(parentCode).then(res => {
resolve(res.data.data.map(item => {
return {
...item,
leaf: !item.hasChildren
}
}))
});
}
},