使用环境

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 = {// 获取全选中的idids: 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);}});
});

原文地址：http://www.article.wang/portal/article/8