重读vue电商网站11之使用树形控件 el-tree
  TEZNKK3IfmPf 2024年07月27日 42 0

对于分配权限一栏,我们需要如下效果:

重读vue电商网站11之使用树形控件 el-tree

相关配置属性:

重读vue电商网站11之使用树形控件 el-tree

其中 data 为我们的数据源,props 为我们在 tree组件显示的文本内容。通过设置 node-key可以让每个树节点作为唯一标识的属性,整棵树是唯一的;通过设置 default-expand-all 来默认展开我们的所有节点,不需要每次都让用户去打开,体验感好;通过设置 default-checked-keys勾选我们已有的权限。

重读vue电商网站11之使用树形控件 el-tree

最后,我们通过递归的方式,判断当前 node 节点是否存在 children属性,如果不存在的话,就包含了三级权限,然后添加到我们的数组中,然后通过 :default-checked-keys="defKeys" 来渲染选中当前已有的权限。

重读vue电商网站11之使用树形控件 el-tree

此外,当我们关闭对话框时还需要监听一下关闭事件,不然每次数组都会保存原来的权限数据,导致一些问题。因此,监听 close 事件后,每次对话框关闭时,都将数组进行清空。

重读vue电商网站11之使用树形控件 el-tree

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年07月27日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年08月09日   63   0   0 javascript前端
  I7JaHrFMuDsU   2024年08月09日   55   0   0 vue用户
TEZNKK3IfmPf