Antd树形控件使用总结

Antd树形控件使用总结

1.@select=“onSelect”
点击事件触发，其中selectedKeys为传递值，可通过selectedKeys[0]获取当前具体值

2.selectedKeys
对应节点是否选中状态，通常和onSelect集合使用（注意判断当前状态）

3.@expand=“onExpand”
展开折叠点击事件，其中expandedKeys为传递值，可通过expandedKeys[0]获取当前具体值
注意：此方法点击展开时需要再次点击当前节点折叠，再次点击其他节点放方才传递key值正确。

4.:expandedKeys=“iExpandedKeys”
对应节点展开/折叠对应key值得绑定

5.:load-data=“onLoadData” 异步加载子节点数据
绑定onLoadData方法通过传递treeNode值进行请求操作
treeNode.dataRef.key可获取其属性值，（任意属性值）

异步记载代码实例（通过一级目录加载二级目录）

onLoadData(treeNode) {
this.param[“oneid”] = treeNode.dataRef.key//获取key值进行传递
return new Promise(resolve => {
if (treeNode.dataRef.children) {
resolve();
return;
}
treeNode.dataRef.children = [];
getAction(this.url.loadtreesUrl, {oneid: this.param.oneid, hos: Vue.ls.get(‘curhos’)}).then((res) => {
if (res.success) {
this.allTreeKeys = [];
treeNode.dataRef.children = res.result;
this.treeData = […this.treeData];
resolve();
}
if (res.code === 510) {
this.$message.warning(res.message);
}
this.loading = false;
})
});
},