当前位置:网站首页>把el-tree选中的数组转换为数组对象
把el-tree选中的数组转换为数组对象
2022-07-06 06:04:00 【不要睡觉哦i】
问题:
el-tree根据数组对象的结构进行渲染,当我们勾选了想要的数据后只会生成一个数组
想要的效果:
把获取选中的数据(数组),根据父A下的子a的结构,进行父子级对应的数据结构转换
我的数据结构:
贴代码:直接复制,改一下变量名即可使用
<el-tree
:data="collectionListData"
show-checkbox
node-key="id"
@check="checkFn"
ref="tree"
:props="defaultProps">
</el-tree>
// 下面代码中出现的devices是我的子级数组数据,记得更改
checkFn(data, node) {
let nodearr = [];
if (!node.halfCheckedKeys.length) {
node.checkedNodes.forEach((item) => {
if (item.devices) {
nodearr.push(item);
}
});
} else {
let nodeCheckedNodes = node.checkedNodes;
let nodeHalfCheckedNodes = node.halfCheckedNodes;
nodeHalfCheckedNodes.forEach((item) => {
let assign = Object.assign({
}, item);
assign.devices = [];
let childrenLength = item.devices;
for (let i = 0; i < nodeCheckedNodes.length; i++) {
if (nodeCheckedNodes[i].devices) {
nodearr.push(nodeCheckedNodes[i]);
} else {
for (let j = 0; j < childrenLength.length; j++) {
if (nodeCheckedNodes[i].id != childrenLength[j].id) {
continue;
} else {
assign.devices.push(childrenLength[j]);
}
}
}
}
nodearr.push(assign);
});
}
this.nodeList = nodearr;
},
边栏推荐
- Hongliao Technology: Liu qiangdong's "heavy hand"
- leaflet 地图
- LTE CSFB process
- 在线问题与离线问题
- Raised a kitten
- 【C语言】字符串左旋
- Caused by:org.gradle.api.internal.plugins . PluginApplicationException: Failed to apply plugin
- 10M25DCF484C8G(FPGA) AMY-6M-0002 BGA GPS模块
- Novice entry SCM must understand those things
- Memory and stack related concepts
猜你喜欢
随机推荐
Reading notes of effective managers
How Huawei routers configure static routes
Grant Yu, build a web page you want from 0
Fault, error, failure of functional safety
Wib3.0 leapfrogging, in leapfrogging (ง • ̀_•́) ง
養了只小猫咪
【论文代码】SML部分代码阅读
Leaflet map
【Postman】Collections配置运行过程
About PHP startup, mongodb cannot find the specified module
[web security] nodejs prototype chain pollution analysis
曼哈顿距离与曼哈顿矩形-打印回字型矩阵
MPLS test report
Coordinatorlayout+nestedscrollview+recyclerview pull up the bottom display is incomplete
Software test interview questions - Test Type
公司视频加速播放
[leetcode] day96 - the first unique character & ransom letter & letter ectopic word
LeetCode 1200. 最小绝对差
PAT(乙级)2022年夏季考试
Usage of test macro of GTEST