如图,保存时要把系统管理的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)})