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

相关推荐
parade岁月10 分钟前
nuxt和vite使用环境比变量对比
前端·vite·nuxt.js
小帆聊前端12 分钟前
Lodash 深度解读:前端数据处理的效率利器,从用法到原理全拆解
前端·javascript
Harriet嘉31 分钟前
解决Chrome 140以上版本“此扩展程序不再受支持,因此已停用”问题 axure插件安装问题
前端·chrome
FuckPatience36 分钟前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
Kingsdesigner41 分钟前
从平面到“货架”:Illustrator与Substance Stager的包装设计可视化工作流
前端·平面·illustrator·设计师·substance 3d·平面设计·产品渲染
一枚前端小能手1 小时前
🔍 那些不为人知但是好用的JS小秘密
前端·javascript
屿小夏1 小时前
JSAR 开发环境配置与项目初始化全流程指南
前端
微辣而已1 小时前
next.js中实现缓存
前端
北城以北88881 小时前
Vue-- Axios 交互(二)
javascript·vue.js·交互
Dcc1 小时前
纯 css 实现前端主题切换+自定义方案
前端·css