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

使用环境

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

相关推荐
然我几秒前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子6 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹9 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器16 分钟前
指定阿里镜像原理
前端
枷锁—sha20 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha22 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜38 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux