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

使用环境

Vue 3 in Vite

Element-Plus

JS语法(非TS)

问题描述:

在使用Element-Plus组件Tree树形控件时,会出现如下问题:

1、子节点未全选时,往后端传输的选中节点没有包含父节点。

如下图,往后端传选中节点时,无法传输父节点Level one 2的信息

2、从后端获取数据渲染时,如果获取的数据不是全选的,回显时父节点下的所有数据会自动全选。

如下图,当我只传输父节点下的部分节点时,我获取数据会显示父节点下的所有子节点会自动全选。

Element UI 的 `el-tree` 控件是一个用于构建树形结构的数据展示组件,它允许你在回显数据设置初始状态,包括是否选择某个节点或其所有子节点。如果你的数据中包含了父节点信息,并希望在回显子节点能根据父节点的状态一起被选中,你可以通过以下步骤操作: 1. 数据处理:在获取后台数据后,遍历每个节点并将其状态(如是否选中)应用到它的子节点上。如果父节点已选中,那么将所有子节点的 `checked` 或 `expanded` 属性设为 `true`。 ```javascript // 假设data是一个el-tree需要的数据源 for (let node of data) { if (node.parentId) { // 如果有parent字段 let parentNode = findParentNodeById(data, node.parentId); // 找到对应父节点 if (parentNode.checked) { setChildrenChecked(node, true); // 设置当前节点及其所有子节点为选中 } } } function findParentNodeById(data, id) { return data.find(item => item.id === id); } function setChildrenChecked(node, checked) { node.children.forEach(child => { child.checked = checked; setChildrenChecked(child, checked); // 递归处理子节点 }); } ``` 2. 初始化选项:在渲染 `el-tree` 组件,传递 `default-checked-keys` 或者 `default-expanded-keys` 属性,指定默认选中的节点或展开的路径,可以参考文档中的例子: ```html <el-tree :data="data" :default-checked-keys="initialSelectedKeys" ref="treeRef"> <!-- ... --> </el-tree> ``` 然后在组件的 `created()` 或 `mounted()` 钩子函数中设置 `initialSelectedKeys`: ```javascript this.initialSelectedKeys = [ // 根据你的数据找到父节点对应的键值 ]; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值