【VUE】使用elementUI tree组件根据所选id自动回显

 需求如下:

1.点击父级节点 将父级节点下children中所有id放入数组

2.点击父级下的子节点 将点击的子节点放入数组

3.取消选择父节点,将放入数组的所有子节点id删除

4.根据选择的子节点数组,匹配他所属的父节点

								<el-tree:data="treeDefaultData":props="defaultProps"show-checkbox@check-change="handleCheckChange"></el-tree>data() {return {defaultProps: {children: 'children',label: 'label',},treeDefaultData: [],
}
}methods: {
//点击将选择到子节点id传入数组handleCheckChange(data, checked, indeterminate) {console.log('该节点所对应的对象:',data,'是否被选中:',checked,'节点的子树中是否有被选中的节点:',indeterminate);if (checked) {if (data.children) {for (let i in data.children) {const item = data.children[i];this.dataScopeList.push(item.id);}} else {this.dataScopeList.push(data.id);}this.dataScopeList = Array.from(new Set(this.dataScopeList));} else {if (data.children) {return;} else {this.dataScopeList = this.dataScopeList.filter(function (e) {return e !== data.id;});}}this.form.dataScopeList = this.dataScopeList;console.log(this.dataScopeList, 'dataScopeList');},// 将数组里的id 自动查找父级id,将所属的子项放入children 并组成新的数组对象calickDetails(row) {getDetails(row.userId).then((response) => {console.log(response.data);this.detailsData = response.data;this.detailsTreeShow = true;let detailsID = this.detailsData.dataScopeList; //详情页 关联门店IDlet result = this.treeDefaultData.filter((item) => {return (detailsID.includes(item.id) ||item.children.some((child) => detailsID.includes(child.id)));}).map((item) => {return {...item,children: item.children.filter((child) =>detailsID.includes(child.id)),};});this.detailsTreeData = result; //关联门店id所属超市及children});},
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/7445.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker——compose单机容器集群编排

Docker——compose单机容器集群编排 一、Docker-compose概述1.为何需要Docker-compose2.Docker-compose 的特征3.Docker-compose 的优势4.Docker-compose 的劣势5.Docker-compose 的生产环境 二、Docker Compose 环境安装三、YAML 文件格式及编写注意事项四、Docker Compose配置…

Spin语法

消息传递 消息通道用于对数据从一个过程到另一个过程的传输进行建模。它们在本地或全局上声明,如下所示: chan qname = [16] of {short}这将声明一个通道,该通道最多可以存储16个short类型的消息。通道名称可以通过通道从一个进程传递到另一进程,也可以作为进程实例化中的…

STM32自学笔记17-步进电机驱动项目-磁编码器的正常使用

上节有这样一句话&#xff1a; 步进电机旋转角度和编码器输出数据之间的关系通常是非线性的。在校准过程中&#xff0c;可以通过采集一系列已知角度位置的数据点&#xff0c;并拟合出角度与编码器数据之间的关系。这个拟合可以使用曲线拟合算法或其他数学方法来实现。通过拟合&…

vscode使用g++编译.c文件或.cpp文件

vscode是一个跨平台、轻量级、插件非常丰厚的IDE&#xff0c;这里介绍在vscode里使用g来编译.cpp文件。g也叫GCC, 在Window中&#xff0c;是使用MinGW方式实现g的&#xff0c;它分为32位和64位2个版本&#xff0c;其中&#xff0c;MinGW-64是64位的&#xff0c;MinGW-32是32位的…

Hive解析JSON串

Hive 处理 json 数据总体来说有两个方向的路走&#xff1a; 将 json 以字符串的方式整个入 Hive 表&#xff0c;然后通过使用 UDF 函数解析已经导入到 hive 中的数据&#xff0c;比如使用 LATERAL VIEW json_tuple的方法&#xff0c;获取所需要的列名。 在导入之前将 json 拆成…

ConcurrentHashMap 相比于 HashMap 的优势

ConcurrentHashMap 使用每个链表头节点作为锁对象, 把一把大锁转换成多把小锁, 大大缩小了锁冲突的概率 HashTable 是给整个 Hash 表加锁, 因此只要有线程抢到了锁其他线程就得阻塞等待. ConcurrentHashMap 是对每个链表加锁, 因此只要不是对同一个链表进行修改就不会阻塞, 大…

【微信小程序】使用iView组件库的ActionSheet组件实现底部选择功能

效果1 效果2 要在微信小程序中使用iView组件库的ActionSheet组件&#xff0c;可以按照以下步骤进行&#xff1a; 首先&#xff0c;确保已经引入了iView组件库的样式和脚本文件。可以在app.wxss中引入iView的样式文件&#xff1a; import "/path/to/iview/weapp/dist/sty…

Ubuntu22.04部署K8s集群

Ubuntu22.04部署K8s集群 一、基础环境准备1.1 VMware Workstation Pro 17.01.2 Ubuntu22.04 二、系统环境配置2.1 设置Master与工作节点的机器名称及配置2.2 解析主机2.3 虚拟内存swap分区关闭2.4 开启IPv4转发2.5 设置时间同步2.6 开启防火墙的端口&#xff08;可选&#xff0…

linux下 UART串口相关

RS232的串口设备在linux 上会被识别为 /dev/ttyS* 或者 ttymxc* 一、串口简介 操作串口我们一般通过以下指令&#xff1a; 1、查看串口波特率等信息&#xff1a; stty -F /dev/ttyS0 -a #ttyS0为要查看的串口 2、设置串口参数&#xff1a; stty -F /dev/ttyS0 ispeed 115…

2023年java面试问题大全及答案大全

202年常见的Java面试问题和答案&#xff1a; Java中的基本数据类型有哪些&#xff1f; 答&#xff1a;Java中的基本数据类型包括整型(int, short, long, byte)、浮点型(float, double)、字符型(char)和布尔型(boolean)。 String和StringBuilder之间的区别是什么&#xff1f; 答…

微信小游戏个人开发者上架:从注册到上线的详细步骤

微信小游戏个人开发者上架&#xff1a;从注册到上线的详细步骤 一&#xff0c;注册小程序账号1.1 微信公众平台1.2 填写信息1.3 绑定管理 二&#xff0c;打包步骤2.1 工具准备2.2 关于Unity版本2.3 打包详解 三&#xff0c;提包步骤3.1 填写用户隐私3.2 完善开发者自查3.3 游戏…

5.string变量-读取一行

C里面的读一行的用法。getline&#xff08;cin,addr&#xff09;; 从标准输入设备cin&#xff0c;读取一行字符串保存到字符串变量addr中 如果用户直接回车什么都不读取就没有任何数据输入 读一行直到遇到回车符&#xff0c;注意不包括回车符。 判断字符串是不是空的 addr.em…

MYSQL的分类 DDL、DML、DQL、DCL

MySQL的分类 DDL、DML、DQL、DCL DDL(Data Definition Language&#xff0c;数据定义语言)DML(Data Manipulation Language&#xff0c;数据操纵语言)DQL(Data Query Language&#xff0c;数据查询语言)DCL(Data Control Language&#xff0c;数据控制语言) 1. DDL(Data Defi…

Cron 选择器

// 定义一个名为 cron 的新组件 Vue.component(cron, {name: cron,props: [data],data() {return {second: {cronEvery: ,incrementStart: 3,incrementIncrement: 5,rangeStart: ,rangeEnd: ,specificSpecific: [],},minute: {cronEvery: ,incrementStart: 3,incrementIncremen…

slam建图与定位_cartographer代码阅读(7)后端约束构建

1.cartographer里的节点:当扫描匹配结束后&#xff0c;有新的一帧scan加入到submap中&#xff0c;这个扫描匹配的结果就叫做节点 global_trajectory_builder.cc // 将匹配后的结果 当做节点 加入到位姿图中auto node_id pose_graph_->AddNode(matching_result->insertio…

2023年一建学霸笔记

考点:单方取消或辞去委托承担的民事责任女《民法典》规定&#xff0c;因解除合同造成对方损失的&#xff0c;除不可归责于该当事人的事由外&#xff0c;无偿委托合同的解除方应当赔偿因解除时间不当造成的直接损失&#xff0c;有偿委托合同的解除方应当赔偿对方的直接损失和合同…

简单理解TCP,UDP,HTTP

我们都知道TCP、UDP、HTTP内部有很复杂的过程&#xff0c;很多人没办法理解的那么深&#xff0c;只想知道这是个什么鬼。 1、TCP、UDP、HTTP 是什么? TCP/IP是个协议组&#xff0c;可分为三个层次&#xff1a;网络层、传输层和应用层。在网络层有IP协议、ICMP协议、ARP协议、…

关于云服务器ECS、宝塔的安装配置以及图床的使用

一、阿里云服务器的申请以及宝塔的安装 安装配置服务器的原理&#xff1a; step1&#xff1a;地址栏输入阿里云服务器官网地址 step2&#xff1a;在首页依次点击以下内容&#xff1a; step3&#xff1a;选择立即购买&#xff0c;并填写以下内容&#xff1a; step4&#xff1a…

Postman和Jmeter做接口测试的区别

1. 用例组织方式 Jmeter的组织方式相对比较扁平&#xff0c;它首先没有WorkSpace的概念&#xff0c;直接是TestPlan&#xff0c;TestPlan下创建的Threads Group就相当于TestCase&#xff0c;并没有TestSuite的层级。 Postman功能上更简单&#xff0c;组织方式也更轻量级&#…

[SQL挖掘机] - 子查询介绍

介绍: 子查询&#xff08;Subquery&#xff09;&#xff0c;也被称为嵌套查询或内部查询&#xff0c;是指在一个查询语句中嵌套使用的查询。它是将一个查询语句作为另一个查询语句的一部分来构建更复杂的查询逻辑。 子查询通常出现在主查询的条件、选择列表或 FROM 子句中&am…