mvc 门户网站开发框架,wordpress横向导航菜单主题,wordpress同步知乎插件,太原建站模板搭建文章目录 前言一、遇到的交互场景el-tree 中 check-strictly 属性 二、处理父级的半选中以及选中交互el-treecheck#xff0c;check-change 事件编辑进来#xff0c;父级的半选状态处理 总结 前言
在开发后台管理系统的时候#xff0c;用户的权限控制是一个常见的需求。这里… 文章目录 前言一、遇到的交互场景el-tree 中 check-strictly 属性 二、处理父级的半选中以及选中交互el-treecheckcheck-change 事件编辑进来父级的半选状态处理 总结 前言
在开发后台管理系统的时候用户的权限控制是一个常见的需求。这里需要探讨下按钮的级别的权限控制以及实现中使用element-plus tree 组件的使用细节。 一、遇到的交互场景
基于原有的基础上实现按钮级别的权限控制原有的如下图每一个菜单都有一个唯一IDPID父级ID现在需要扩展的功能就是添加一个button按钮控制其中主要的细节交互
取消选中子级menu/button父级不关联取消选中/取消父级catalog/menu子级全部选中/取消选中/取消部分子级menu/button父级关联半选中状态indeterminatetrue
其中我用的是el-tree 组件我用button:xxx业务按钮这样的方式来命名后端也给了区分类型的字段typecatalog目录)menu菜单button按钮。 el-tree 中 check-strictly 属性
el-tree 中 check-strictly 属性为了实现取消选中子级menu/button父级不关联取消这里check-strictly设置为true设置后点击父级也不关联子级选中了用户用起来不方便这里就需要我们自己处理
二、处理父级的半选中以及选中交互
el-tree el-treereftreeRef:check-strictlytrue:datatreeDatashow-checkboxdefault-expand-allnode-keyidhighlight-current:default-checked-keysvariable.roleForm.featureIds:propsdefaultPropscheckhanleCheckcheck-changecheckChange/const defaultProps {children: children,label: function (treeData: any, treeNode: any) {return treeData?.name}
}checkcheck-change 事件
这里主要用的事件 checkcheck-change
const hanleCheck (data:any, node:any) {console.log(data, node);// 获取当前节点是否被选中const isChecked treeRef.value!.getNode(data).checked// 如果当前节点被选中则遍历下级子节点并选中如果当前节点取消选中则遍历下级节点并取消if (isChecked) {// 判断该节点是否有下级节点如果有那么遍历设置下级节点为选中data.children data.children.length 0 setChildreChecked(data.children, true)} else {// 如果节点取消选中则取消该节点下的子节点选中data.children data.children.length 0 setChildreChecked(data.children, false)}function setChildreChecked(node:any, isChecked:boolean) {node.forEach((item:any) {item.children item.children.length 0 setChildreChecked(item.children, isChecked)// // 修改勾选状态treeRef.value!.setChecked(item.id, isChecked,false)})}
}const checkChange (data, checked, indeterminate) {// console.log(data, checked, indeterminate);// 选中全部子节点父节点也默认选中但是子节点再次取消勾选或者全部子节点取消勾选也不会影响父节点勾选状态let checkNode treeRef.value!.getNode(data)//获取当前节点// 勾选部分子节点父节点变为半选状态if (checkNode.parent checkNode.parent.childNodes.some(ele ele.checked)) {checkNode.parent.indeterminate true}// 勾选全部子节点父节点变为全选状态if (checkNode.parent checkNode.parent.childNodes.every(ele ele.checked)) {checkNode.parent.checked truecheckNode.parent.indeterminate false}// 如果取消所有第二节点的勾选状态则第一层父节点也取消勾选if (checkNode.level 2 checkNode.parent.childNodes.every(ele !ele.checked)) {checkNode.parent.checked falsecheckNode.parent.indeterminate false}
}
其中上面用的 treeRef.value!.setChecked(item.id, isChecked,false)看文档说第三个属性是是否要递归我觉得是设置了true后应该帮我递归选中/取消关联的节点但没有生效所以还是自己递归下有大佬能指出是我的用法有问题吗劳烦指出
编辑进来父级的半选状态处理
上述方法实现后我们就可以实现上述交互了但这里要注意的一点就是点击编辑进入的父级的半选状态没有选中也就是说 checkNode.parent.indeterminate 这个没有被设置为true下面打个补丁。
const editRole async (row: any) {const { permissionIds} await detailApi({ id: row.id })await nextTick()setCheckedKeys(permissionIds) // 返回用户的权限id后根据id选中树节点permissionIds.forEach((id:any) {const nodeData treeRef.value!.getNode(id) // 根据权限id获取每个选中的树节点console.log(nodeData,nodeData)console.log(nodeData.parent?.id,nodeData.parent?.id)// 反显上面setCheckedKeys后如果父级没有选中则把半选状态设置trueif(nodeData?.parent?.id ! 0 !nodeData?.parent?.checked){nodeData.parent.indeterminate true}});
}总结
后台管理系统常见的权限控制需求这里讲button实现交互细节处理
取消选中子级menu/button父级不关联取消选中/取消父级catalog/menu子级全部选中/取消选中/取消部分子级menu/button父级关联半选中状态indeterminatetrue 下篇再补上button 的根据权限控制显示用vue3 的指令实现谢谢关注
