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

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github