做网站建设的怎么寻找客户,网页设计网站模板,网站主题咋做,资讯网站优化排名前言示例版本为 Element-ui 2.13.0 Vue 2.6.11最近想弄 Element-ui checkbox 的多级联动#xff0c;网上相关的例子大多数为二级联动#xff0c;自己研究了一下#xff0c;弄了一个树形菜单的多级联动#xff0c;常用于角色管理等业务。(仅供参考#xff0c;未考虑性能问…前言示例版本为 Element-ui 2.13.0 Vue 2.6.11最近想弄 Element-ui checkbox 的多级联动网上相关的例子大多数为二级联动自己研究了一下弄了一个树形菜单的多级联动常用于角色管理等业务。(仅供参考未考虑性能问题)数据模型[{menu: {id:14,menuName:测试管理,parentId:0} menuOptionsList:[{id:46,optionsName:列表,checked:false},{id:47,optionsName:新增,checked:false}],children:[],checked:false}]复制代码这里展示的最顶级的数据结构下级数据只需要在 children 中添加即可。需要注意的是 checked 属性本身数据库表中没有这个数据需要后台建立一个 VO 映射实体将 checked 字段添加进去默认值为 false.逻辑处理html 使用 el-table el-chekbox 展示:datamenuListborderfitsizeminihighlight-current-rowrow-keymenu.id:default-expand-alltrue:tree-props{children: children, hasChildren: hasChildren}v-modelscope.row.checked:indeterminatescope.row.indeterminatechangehandleCheckAllChange(scope.row, $event){{ scope.row.menu.menuName }}v-foroptions in scope.row.menuOptionsList:keyoptions.idv-modeloptions.checked:labeloptions.optionsNamechangehandleCheckChange(scope.row)/复制代码核心方法 handleCheckAllChange 和 handleCheckChange 这两个方法handleCheckAllChange 是 菜单选项 列按钮被点击的事件handleCheckChange 是 选项列表 列被点击的事件。handleCheckAllChange(菜单列改变事件)handleCheckAllChange(val, checked) {// 有下级去处理下级if (val.children.length 0) {// 递归设置子级选中状态this.findChildren(val.children, checked)} else {// 无下级处理本级val.menuOptionsList.forEach(options { options.checked checked })}// 处理上级if (val.menu.parentId ! 0) {递归设置上级选中状态this.findParent(this.menuList, val.menu.parentId)}// 设置全选的未全部选中的状态val.indeterminate false}复制代码根据数据中 children 的长度来判断是否存在下级如果存在就执行递归方法 findChildren 将子类的 checked 属性设置为 true不存在处理本级的 checked 属性即可。需要注意的是 parentId 等于 0 证明当前菜单父级为顶级菜单不需要再向上寻找。以此为判断依据来进行父级菜单的判断条件。 如果 parentId 不等于 0 说明当前全选的菜单存在父级需要将父级的选项框进行状态设置。handleCheckChange(选项列改变事件)handleCheckChange(val) {const length val.menuOptionsList.lengthlet checkedLength 0val.menuOptionsList.forEach(options {if (options.checked) {checkedLength}})val.checked checkedLength lengthval.indeterminate checkedLength 0 checkedLength length// 处理上级if (val.menu.parentId ! 0) {this.findParent(this.menuList, val.menu.parentId)}}复制代码这个方法对应着 选项列表 列选中的状态需要对 菜单名称 列的全选状态进行控制。首先通过变量 length 获取到当前数据行选项列表的数量遍历选项数组根据 checked 的状态获取到已选中的选项数量。val.checked 代表当前列是否全选val.indeterminate 代表当前列是否有选项被选中。但是这只是处理了当前行的状态当前行可能是某一菜单的子集所以需要由下向上的去寻找菜单的父级并设置选中状态。这里同样用到了上面方法中的 findParent 函数。findChildren(递归查询子集)findChildren(list, checked) {list.forEach(children {children.checked checkedchildren.indeterminate falsechildren.menuOptionsList.forEach(options {options.checked checkedif (children.children.length 0) {this.findChildren(children.children, checked)}})})}复制代码findParent(递归查询父集)findParent(list, parentId) {list.forEach(result {let parentCheckedLength 0let parentIndeterminateLength 0if (result.menu.id parentId) {result.children.forEach(children {if (children.indeterminate) {parentIndeterminateLength} else if (children.checked) {parentCheckedLength}})result.checked parentCheckedLength result.children.lengthresult.indeterminate (parentIndeterminateLength 0 || parentCheckedLength 0) parentCheckedLength result.children.lengthif (result.menu.parentId ! 0) {this.findParent(this.menuList, result.menu.parentId)}} else if (result.children.length 0) {this.findParent(result.children, parentId)}})}复制代码完整示例由于源码篇幅过长暂时将源码放到 GitHub 了希望可以帮助到你。
