本文共 567 字，大约阅读时间需要 1 分钟。

控制分配权限对话框的显示与隐藏：



我们在弹出对话框之前要先获取所有权限数据：

弹出对话框前要获取所有权限数据：


效果：

为了显示这些数据，我们要用到一个新的tree控件

对于defaultProps对象，里面的children就代表父子嵌套数据之间是通过哪个字段链接的，label代表前面看到的文本是哪一个数据字段

这些都是label，我们的例子里面label是属性authName

下面我们定义自己的defaultProps

我们接下来要在树形控件的前面显示可选框：
只要加上show-checkbox就可以了

怎么知道选择了哪些节点？

我们用id来绑定节点的唯一标识：

node-key="id"中的id就是下面这个：

默认让树形结构展开就设置default-expand-all属性

效果：

接下来我们把角色身上的权限加载到树形控件里面，即默认勾选：

我们把这些选中节点的id值都存在一个数组里：

通过递归的形式获取角色下所有的三级权限的id,并保存到defKeys数组中，这里最好要有return,不然即使处理完了三级节点还会继续往下运行，加了return就可以直接退出当前循环了提高效率

我们再在分配权限那里传入当前角色的所有数据：

这里就可以接收role并处理了

我们还要在每次关闭对话框的时候清空一下defKeys数组：