iview组件库:自定义方法去控制Tree树形数据的根节点与叶节点的关联性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iview组件库:自定义方法去控制Tree树形数据的根节点与叶节点的关联性相关的知识,希望对你有一定的参考价值。

参考技术A 今天会议上针对权限提出了新的意见,权限需要控制到按钮级别,意味着不同的用户可能拥有相同的页面的查看权限,但是有的用户能使用里面的按钮权限,比如:新增项目,编辑产品....等按钮功能,但是有的用户不能去使用里面的按钮权限功能。

后台将数据加在页面的children下,如图,这一层级就是按钮权限的控制,我前端这边就是需要根据checked的布尔值去控制。一开始我是直接使用tree树形组件去渲染,然后就感觉做完了,直到测试提出几个问题点。

发现了问题点,大概将问题整理了一下:
1、选中当前按钮权限层级的节点或者取消勾选当前页码下的所有的按钮权限层级的节点,它的父节点的勾选状态应该不发生改变。
2、但是当这个父节点的页面没有权限的时候,按钮的权限应该对应的也全部没有。
3、控制页面查看权限的父节点如果也取消了勾选,那么页面的查看权限以及下面所有的按钮查看权限也应该全部取消
4、如果页面没有查看权限,不能去给用户分配按钮的查看权限

API中明确的说明了返回的是当前已经勾选的数组、当前项。

这种方法比较繁琐,谨慎选择。

这种方法只需要在点击的时候去做判断处理就OK了,不需要进行大量的数据逻辑筛选处理。

以上是关于iview组件库:自定义方法去控制Tree树形数据的根节点与叶节点的关联性的主要内容,如果未能解决你的问题,请参考以下文章

iview-树形控件的使用(一)

基于vue手写tree插件那点事

elementUI树形组件添加连线和自定义图标

移动端树形组件的实现

iview 中Tree 树形控件,遇到的问题

iView中Tree组件children中动态checked选中后取消勾选再选中无效问题