后台角色授权用 layui 的 tree,勾了部门节点,提交时后端只收到父节点 id,子部门一个没进去。测试同事点了一圈,说勾选在界面上看着是全的。
getChecked 只给全选的节点
tree 组件里,父节点勾满才算选中,勾了一部分算半选,半选节点不出现在 getChecked 的结果里。很多人以为勾了父就是全选,实际拿到的是全选子节点的 id,父节点反而可能不在里面。取值前先把返回结构打印出来看一眼。
父子联动默认是开的
showCheckbox 配上 data,默认就有父子联动,勾父带子、取消父清子。不想要这个行为,在回调里自己处理,别去改源码。半选状态在界面上显示成减号,取值时被忽略,这一点最容易漏。需要半选也提交,就得自己在 oncheck 里维护一份集合。
数据字段名要对上
节点对象默认读 id、title、children 三个字段。后端返回的是 deptId、deptName,就得在渲染时通过属性映射改掉,不改的话树是空的或者点不动。层级字段别写成 childs,拼错一个字母,整棵树只剩第一层。
提交前自己再过滤
后端要最末级节点,前端拿到一串 id 之后,按父子关系把带子节点的父级去掉,只留叶子。反过来要全路径,就在每个节点上挂一个祖先字段,渲染时自己拼。别指望组件替你做业务判断,它只认勾选状态。
回显时父节点会连锁勾满
编辑角色时把库里存的 id 直接写进 checked,只要里面有一个父节点,联动就会把它下面所有子节点一起勾上,多出来的权限就是这么进的库。回显只给最末级节点加 checked,父级多少让组件按子节点自己判断。
节点上千时全部展开会卡好几秒,把节点的 spread 设成 false,只展开第一层,渲染时间能降一个数量级。提交成功后整棵树重新渲染,别在旧实例上改数据,残留的勾选会带到下一次编辑。
树上的勾选和提交的数据不是一回事。拿到 id 之后按业务再筛一遍,这步省不掉。