Element-Plus组件Tree树形控件时，传输失去父节点和回显父节点下的子节点全选问题解决

远方的猫2024-08-08 21:21

使用环境

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

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