使用环境
Vue 3 in Vite
Element-Plus
JS语法（非TS）
问题描述：
在使用Element-Plus组件Tree树形控件时，会出现如下问题：
1、子节点未全选时，往后端传输的选中节点没有包含父节点。
如下图，往后端传选中节点时，无法传输父节点Level one 2的信息
2、从后端获取数据渲染时，如果获取的数据不是全选的，回显时父节点下的所有数据会自动全选。
如下图，当我只传输父节点下的部分节点时，我获取数据会显示父节点下的所有子节点会自动全选。
解决问题：
组件在页面中的显示代码
<template>
<div>
<el-tree ref="rabcTree" :data="menuListData" show-checkbox node-key="id" :props="defaultProps" />
</div>
</template>
<script setup>
// 只展示关键代码
const rbacChecked = ref([])
const menuListData = ref([])
const defaultProps = ref({
children: 'children',
label: 'name'
})
</script>
1、子节点未全选时，往后端传输的选中节点没有包含父节点。解决办法如下：
function editRbac() {
// 此处获取已选取的节点，不包含父节点
let permissionids = rabcTree.value.getCheckedKeys(false)
// rabcTree.value.getHalfCheckedKeys()获取的是父节点，通过concat将父节点拼接，传入后端
const permissionParams = {
// 获取全选中的id
ids: permissionids.concat(rabcTree.value.getHalfCheckedKeys()),
// 将两个数组进行拼接
id: roleid.value
}
authorizePut(permissionParams).then(response => {
ElMessage({
message: '修改成功!',
type: 'success',
duration: 5 * 1000
})
})
}
2、从后端获取数据渲染时，如果获取的数据不是全选的，回显时父节点下的所有数据会自动全选。解决办法如下：
// 处理子父节点关联问题，在请求数据方法获取后添加以下代码
nextTick(() => {
rbacChecked.value.forEach((i, n) => {
let node = rabcTree.value.getNode(i);
// 如果是叶子节点就设置
if (node.isLeaf) {
rabcTree.value.setChecked(node, true, true);
}
else{
rabcTree.value.setChecked(node, true);
}
});
});