1.树状表格中主要用到的一些参数
row-key="uniqueKey" --这个是唯一值
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
lazy
@load="loadChildren" --点击加载子类的方法
2.遇到的一些主要问题分析
2.1关于数据的处理,返回的数据中一定要有一个字段 hasChildren 并且为Boolean类型,用来判断该条数据是否会有子类
2.2 如何局部刷新父节点
this.$set(this.$refs.table.$refs.eveTablePagination.store.states.lazyTreeNodeMap, parentId, res.data);
getPlaceSmallTypeList(param).then((res)=>{
if(res.success){
res.data.map(item=>{
this.$set(item,'uniqueKey',item.id + new Date().valueOf().toString());
})
this.$set(this.$refs.table.$refs.eveTablePagination.store.states.lazyTreeNodeMap, parentId, res.data);
}else{
this.$set(this.$refs.table.$refs.eveTablePagination.store.states.lazyTreeNodeMap, parentId, []);
this.$message.error("获取子类失败!");
}
})
主要是使用这个方法,parentId为你要更新的父节点的ID。一般来说在新增、编辑、删除的时候都需要用到这个方法来对某个或者多个节点进行更新。
2.3 查询后的数据缓存的问题
原因分析,因为row-key=“uniqueKey” 会对这个字段查询后根据Id进行存储,所以当每次查询id不变的情况下缓存的数据会一直存在
res.data.map(item=>{
this.$set(item,'uniqueKey',item.id + new Date().valueOf().toString());
})
我们可以根据Id+时间戳每次查询的时候都生成新的key。这样就不会存在缓存导致查询后数据还是之前的,并且能起到重置的作用,注意这个设置的值的名称要与row-key绑定的一致