antd-design-vue Tree树形控件——不完全选中子节点后想要获取父节点的值，与后端交互

如图，保存时要把系统管理的id也传给后端

antd tree组件子菜单未完全选中时父级菜单id是不会传入checkedKeys(v-model)绑定的checkedKeys数组中的。

通过阅读文档：

 

 有一个属性halfCheckedKeys就是关联父节点的值。这样，我们可以轻松的拿到值了，和选中节点拼接起来一起传给后台就好了。

下面先定义一个空数组checkedKeysBack用于保存选中的子节点和父节点，将checkedKeysBack传给后端OK了。

const checkedKeysBack = ref([])
function check (checked, e) {
  checkedKeysBack.value = checked.concat(e.halfCheckedKeys) 
  //e.halfCheckedKeys即为父节点集合，通过concat将选中的子节点与父节点合并为一个新数组
}

function submitForm () {
  proxy.$refs.roleRef.validate().then(() => {
    // 保存时将checkedKeysBack.value传给后端
    form.value.menuIds = checkedKeysBack.value
    if (form.value.roleId !== undefined) {
      updateRole(form.value).then(() => {
        proxy.$modal.msgSuccess('修改成功')
        open.value = false
        getList()
      })
    } else {
      addRole(form.value).then(() => {
        proxy.$modal.msgSuccess('新增成功')
        open.value = false
        getList()
      })
    }
  })
}

 

上面的处理在新建的时候没有问题，一旦到了编辑或者查看的时候，需要反写权限树，就会出问题，因为我们是受控组件，用到了checkedKeys，选中复选框的树节点，当父节点选中时，其下面的子节点也会全部选中。

解决反写的时候，如果传入父节点 key，则子节点自动选中的问题

思路比较简单，首先定义一个数组childArr，获取所有子节点。

// 定义childArr存放所有子节点
const childArr = ref([])
// 遍历获取所有子节点
function getChildArr (data) {
  data.forEach((res) => {
    if (res.children && res.children.length > 0) {
      getChildArr(res.children)
    } else {
      childArr.value.push(res.id)
    }
  })
  return childArr.value
}

接着用后端接口返回的id数组（有父节点，有叶子节点）与childArr数组比较，取出相同的元素，再将获得的新数组给Tree组件的checkedKeys赋值。

roleMenu.then((res) => {
   checkedKeysBack.value = res.checkedKeys // res.checkedKeys为接口返回的id数组
   const allChildArr = getChildArr(menuOptions.value)
   // 使用lodash的_.intersection方法取出相同的id并赋值给checkedKeys
   checkedKeys.value = _.intersection(res.checkedKeys, allChildArr)
})