700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > antd-design-vue Tree树形控件——不完全选中子节点后想要获取父节点的值 与后端交互

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

时间:2018-09-15 14:17:50

相关推荐

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.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)})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。