创美艺佳网站是谁做的/网站建设平台

如图，保存时要把系统管理的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.valueif (form.value.roleId !== undefined) {updateRole(form.value).then(() => {proxy.$modal.msgSuccess('修改成功')open.value = falsegetList()})} else {addRole(form.value).then(() => {proxy.$modal.msgSuccess('新增成功')open.value = falsegetList()})}})
}

 

上面的处理在新建的时候没有问题，一旦到了编辑或者查看的时候，需要反写权限树，就会出问题，因为我们是受控组件，用到了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并赋值给checkedKeyscheckedKeys.value = _.intersection(res.checkedKeys, allChildArr)
})