网站通内容管理系统金融理财网站建设

上一篇文章记录的是自己将树状数据转换为表格形式。但是出现了一个小bug，点击子节点时候会选中父节点，这个是正常需求没问题。但是我点击父节点时候取消所有子节点，父节点 选择也会失去，这是我不想要执行的。例如一个页面里面有主页，各种小组件，但是我只想看一个主页，小组件都不要了。而不是我如果想要看主页必须最少选择一个组件。

代码：

el-tree的组件方法

check-change	节点选中状态发生变化时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
check	当复选框被点击的时候触发	共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性

<el-treeshow-checkbox:data="allMenu":default-expand-all="true"node-key="permissionId"ref="menuTree"check-strictlyhighlight-current:props="xxxxx"empty-text="暂未匹配到信息"@check="handleCheck"@check-change="handleCheckChange"></el-tree>

一、递归调用获取所有的节点ID

setChecked

通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性

(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false

这里为什么不使用带S的。肯定是这个方法有问题。

setCheckedKeys

通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性

(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false

selectChildren(data) {if (data && data.sonPermissionList) {// 如果数据存在且有子权限列表data.sonPermissionList.map((item) => {// 将子节点的权限设置为勾选状态this.$refs.menuTree.setChecked(item.permissionId, true);if (data.sonPermissionList) {// 如果子权限列表存在，则递归调用 selectChildren 方法this.selectChildren(item);}});}
}

二，点击复选框事件

在点击时候能获取到当前的树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性

handleCheck(data, { checkedKeys }) {// 第二个参数使用解构赋值获取选中状态的对象 checkedKeys// 使用 includes 方法判断当前节点的权限ID是否包含在 checkedKeys 中。如果包含，则调用 selectChildren 方法。if (checkedKeys.includes(data.permissionId)) {this.selectChildren(data);}
},

三、在点击复选框时候 进行父子节点的处理

handleCheckChange(data, checked, indeterminate) {if (checked === false) {if (data.sonPermissionList) {// 如果当前节点被取消勾选data.sonPermissionList.map((item) => {// 将子节点的权限设置为取消勾选状态this.$refs.menuTree.setChecked(item.permissionId, false);});}} else {if (data.pid !== null) {// 如果当前节点被勾选，并且有父节点this.$refs.menuTree.setChecked(data.pid, true);}}// 获取勾选状态的节点数组var check = this.$refs.menuTree.getCheckedNodes();// 提取节点数组中的权限ID，并去重var idList = check.map((item) => {this.permissionIdList = [];return item.permissionId;});this.permissionIdList.push(...idList);// 对去重后的权限ID列表进行过滤this.permissionIdList = this.permissionIdList.filter((item, index) => {return this.permissionIdList.indexOf(item, 0) === index;});
}