1、问题
在做项目的权限配置模块中需要给用户设置菜单权限,点击数据权限配置弹出对话框,对话框中包含一个树形控件通过勾选节点来给用户配置相应的菜单权限。
需求是当点击按钮出现权限菜单时需要展开所有的父节点,在配置autoExpandParent、defaultExpandAll属性之后都无效。
2、原因
树形控件属性分受控与不受控属性,可以自己去antd文档去了解下,这里不多赘述。
3、解决
组件上有个属性可以指定展开的节点,所以在我们获取树形控件数据之后通过递归遍历出所有的父节点并且赋值给expandedKeys属性。
函数代码如下:
// 递归所有父节点默认展开
getFatherKeys(list) {
var keys = [];
let find = function (arr) {
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
if (item.children.length > 0) {
keys.push(item.id);
find(item.children);
}
}
};
find(list);
return keys;
},
调用:
this.dataExpandedKeys = this.getFatherKeys(this.dataTreeData)
4、完成实现效果