场景：在做后台管理项目时，需要对不同的角色分配不同的菜单权限，所以用到了el-tree组件
image.png
使用组件过程中遇到了一些问题
问题一 ：半选状态下的父菜单ID不会被提交
新增角色时，需要给角色分配一些菜单权限，菜单是分层级的，比如父级菜单 > 子菜单。子菜单也可能嵌套多层子菜单。举个例子来说，假如 A是父菜单，B是A的子菜单，C也是A的子菜单，如果新增的时候，我只勾选了B菜单，不勾选C菜单，这个时候A菜单就是半选的状态。这个时候如果我们直接提交到后台，那么就会只把B菜单的ID提交，而不包括A菜单的ID，这样，这个角色下的账号在登录后，就只显示B菜单，而不能显示B的父级菜单A,这肯定是不行的。
-
我们想要达到的效果是，只要A菜单下有子菜单被勾选了，无论是全部子菜单还是个别子菜单，我们都要把A菜单的ID传给后台，这样这个角色下的账号在登录的时候，才可以看到A菜单。
image.png -
那我们要怎么解决这个问题呢？ 很简单，我们需要用到两个方法
image.png - 通过
getHalfCheckedKeys方法，我们获取到半选状态下的父节点的ID，然后再通过getCheckedKeys方法，我们获取到以及被勾选的子节点的ID，然后把这两个方法获取到的ID，组合成一个数组提交给后台，就可以了
const parentArr = this.$refs.tree.getHalfCheckedKeys()
const childeArr = this.$refs.tree.getCheckedKeys()
const arr = childeArr.concat(parentArr) // 这个数组提交给后台
问题二： 我们新增的时候，如果勾选了菜单权限，但是并没有提交，而是把新增弹框关了，如果再次打开新增弹框，会发现，刚才勾选的菜单，并没有取消勾选状态，还是被勾选状态，这个需要我们通过一个方法来解决
image.png
- 我们只需要监听新增弹框关闭的时候，去执行这个方法，把目前勾选的节点数组设置为空就可以了
// 关闭新增弹框
closeAddDialog() {
this.$refs.tree.setCheckedKeys([])
}
问题三：半选的菜单，修改回显的时候，会把父菜单下的子菜单全部勾选显示
当我们新增成功后，可能需要修改某个角色的菜单权限，通常我们是使用default-checked-keys来回显这个角色的菜单权限的。
image.png
还拿刚才的例子来说，之前我们新增的时候，我们把A菜单的ID和B这个子菜单的ID一起提交给后台了，我们点击修改的时候，获取到这个角色的菜单权限里肯定是包含A菜单的ID的，我们回显的时候，正确的情况应该是A是半选状态，B是勾选状态，而C是未勾选状态，但是el-tree这个时候因为A菜单的ID的存在，通过default-checked-keys把A菜单以及它下边的所有的子菜单都变成勾选状态，这明显是错误的。怎么解决呢？
// 我们借助一个方法来递归遍历下后台返回的当前角色的菜单权限和总菜单权限
// 递归筛选
// 参数 id为后台返回的当前角色的菜单ID数组中的其中一个元素
// 参数data为el-tree的data属性绑定的总的菜单权限数组
// newArr 为存放筛选结果的新数组
checked(id, data, newArr) {
data.forEach(item => {
if (item.id === id) {
if (item.children.length === 0) {
newArr.push(item.id)
}
} else {
if (item.children.length !== 0) {
this.checked(id, item.children, newArr)
}
}
})
},
// 我们拿到当前角色下的菜单ID数组
getRoleMenuID().then( res => {
const ids = res.data.menuIdList
const newArr = []
if (this.checkedList && this.checkedList.length !== 0) {
// 遍历当前角色下的菜单ID数组
ids .forEach(item => {
// 把当前角色下的菜单ID数组 里的每一项拿出来跟总菜单数组一起遍历筛选，把被勾选的子节点放入新数组
this.checked(item, this.menuList, newArr)
})
// 最后，只把被勾选的子节点放入默认勾选的数组去显示就可以了
this.checkedList = newArr
}
})
问题四：解决了半选变全选的回显问题后，我们还面临着一个老问题，那就是，我们修改后，提交的时候，还需要再次把半选的父级ID传递给后台的。
- 方法跟之前一样,把半选的节点的ID和勾选的节点的ID组合到一起提交就可以了
const parentArr = _this.$refs.tree.getHalfCheckedKeys()
const childeArr = _this.$refs.tree.getCheckedKeys()
const arr = childeArr.concat(parentArr) // 修改了权限菜单后，把菜单ID组合提交
