elementui中el-select和el-tree实现下拉树形多选功能

实现效果如下:
在这里插入图片描述
代码如下:
html中

   <el-col :lg="12"><el-form-item label="可用单位" prop="useOrgListTemp"><div class="departAll"><el-selectref="selectTree"v-model="valueName":value="valueMultiple"multipleclearable@remove-tag="changeValue"@clear="clearHandle"placeholder="请选择可用单位"><divstyle="padding-left: 22px; margin-bottom: 6px;margin-top:2px"><el-checkbox @change="myDepartChage" v-model="mychecked">我所在的部门:</el-checkbox><span style="margin-left:6px">{{myDepart.name}}</span></div><div style="padding-left: 22px"><el-checkbox @change="myAllChage" v-model="allchecked">全选</el-checkbox></div><el-option:value="valueName"style="height: auto; background: #fff"><el-tree:data="data"show-checkboxref="tree"node-key="id"id="tree-option"default-expand-all:props="defaultProps"@check-change="handleNodeClick"><spanclass="custom-tree-node"slot-scope="{ data }"><span>{{ data.name }}</span></span></el-tree></el-option></el-select></div></el-form-item></el-col>

data中

   valueName: [],valueMultiple: [],choosedValue: [],mychecked: true,allchecked: false,myDepart: {id: 9,name: "三级 1-1-1",},data: [{id: 1,name: "一级 1",children: [{id: 4,name: "二级 1-1",children: [{id: 9,name: "三级 1-1-1",},{id: 10,name: "三级 1-1-2",},],},],},{id: 2,name: "一级 2",children: [{id: 5,name: "二级 2-1",},{id: 6,name: "二级 2-2",},],},{id: 3,name: "一级 3",children: [{id: 7,name: "二级 3-1",},{id: 8,name: "二级 3-2",},],},],defaultProps: {value: "id",children: "children",label: "name",},

mounted中

this.choosedValue=[]this.choosedValue.push(this.myDepart.id)this.$refs.tree.setCheckedKeys(this.choosedValue);

methods中

 // 选择所属部门myDepartChage(val){if(val==true){if(this.choosedValue.indexOf(this.myDepart.id)==-1){this.choosedValue.push(this.myDepart.id)}this.choosedValue=[...new Set(this.choosedValue)]this.$refs.tree.setCheckedKeys(this.choosedValue);}else{if(this.choosedValue.indexOf(this.myDepart.id)!=-1){this.choosedValue.forEach((item,index)=>{if(item==this.myDepart.id){this.choosedValue.splice(index,1)}})}this.choosedValue=[...new Set(this.choosedValue)]this.$refs.tree.setCheckedKeys(this.choosedValue);}},// 全选myAllChage(val){if(val==true){this.mychecked=truethis.data.forEach((item, index) => {this.choosedValue.push(item.id)});this.choosedValue=[...new Set(this.choosedValue)]this.$refs.tree.setCheckedKeys(this.choosedValue);}else{this.mychecked=falsethis.choosedValue=[]this.$refs.tree.setCheckedKeys([]);}},// 点击树形选择节点handleNodeClick(node, checked) {if (checked) {if (node.children == null || node.children == undefined) {if(node.id==this.myDepart.id){this.mychecked=true}let num = 0;this.valueName.forEach((item) => {item == node[this.defaultProps.label] ? num++ : num;});if (num == 0) {this.valueName.push(node[this.defaultProps.label]);this.choosedValue.push(node["id"]);this.choosedValue=[...new Set(this.choosedValue)]this.valueName=[...new Set(this.valueName)]}}} else {if (node.children == null || node.children == undefined) {this.valueName.map((item, index) => {if(node.id==this.myDepart.id){this.mychecked=false}if (node.name == item) {this.valueName.splice(index, 1);}});this.choosedValue.map((item,index)=>{if (node.id == item) {this.choosedValue.splice(index, 1);}})}}console.log(this.choosedValue)console.log(this.valueName)},// 删除单个标签changeValue(val) {const a = this.findItemByName(this.data, val);if(a.id==this.myDepart.id){this.mychecked=falsethis.choosedValue.forEach((item, index) => {if (item == this.myDepart.id) {this.choosedValue.splice(index, 1);}});}this.choosedValue.forEach((item, index) => {if (item == a.id) {this.choosedValue.splice(index, 1);}});this.$refs.tree.setCheckedKeys(this.choosedValue);},// 递归找到符合的元素findItemByName(items, targetName) {for (let i = 0; i < items.length; i++) {const currentItem = items[i];if (currentItem.name === targetName) {return currentItem;}if (currentItem.children) {const foundItem = this.findItemByName(currentItem.children,targetName);if (foundItem) {return foundItem;}}}},// 清空所有标签clearHandle() {this.valueName = [];this.mychecked=falsethis.allchecked=false;this.choosedValue=[]this.clearSelected();},clearSelected() {this.$refs.tree.setCheckedKeys([]);},

css中 多选框元素太多的话 设置最大高度 超出最大高度后 上下滚动

.departAll{::v-deep .el-select__tags{max-height:90px;overflow-y: auto;}
}

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

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

相关文章

英语——分享篇——每日200词——2601-2800

2601——resistant——[rɪzɪstənt]——adj.抵抗的——resistant——resi热死(拼音)st石头(拼音)ant蚂蚁(熟词)——热死了石头上的蚂蚁还在抵抗——The body may be less resistant if it is cold. ——天冷时&#xff0c;身体的抵抗力会下降。 2602——prospect——[prɒspe…

42911-2023 碳纤维增强复合材料 密封压力容器加速吸湿和过饱和调节方法

1 范围 本文件描述了碳纤维增强复合材料加速吸湿和过饱和调节的方法&#xff0c;该方法在温度高于100 ℃但低 于试验材料玻璃化转变温度(T) 的饱和水蒸气密封压力容器中进行。 本文件适用于玻璃化转变温度大于150℃的热固性碳纤维增强复合材料。热塑性碳纤维增强复合 材料也…

html中公用css、js提取、使用

前言 开发中&#xff0c;页面会有引用相同的css、js的情况&#xff0c;如需更改则每个页面都需要调整&#xff0c;重复性工作较多&#xff0c;另外在更改内容之后上传至服务器中会有缓存问题&#xff0c;特针对该情况对公用css、js进行了提取并对引用时增加了版本号 一、提取…

Linux:权限是什么

本篇文章来简单介绍一下Linux操作系统中权限的基本概念和一些操作方法&#xff0c;对Linux权限有一个基本的了解&#xff0c;希望对大家学习Linux有所帮助。 目录 1.权限的概念 2.Linux权限管理 2.1 文件访问者的分类 2.2 文件类型与访问权限&#xff08;事物属性&#xff…

019-第三代软件开发-Git提交规范

第三代软件开发-Git提交规范 文章目录 第三代软件开发-Git提交规范项目介绍Git提交规范分支规范Commit Message FormatHeaderBodyFooterRevert 总结一下 关键字&#xff1a; Qt、 Qml、 git、 Commit、 release 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个…

【广州华锐互动】全屋智能家电VR虚拟仿真演示系统

在过去的几年中&#xff0c;智能家居的概念已经逐渐进入人们的生活。然而&#xff0c;它的真正潜力和最终形态可能还未被完全发掘。一种新兴的技术&#xff0c;虚拟现实&#xff08;VR&#xff09;&#xff0c;为我们提供了一种全新的方式来理解和体验智能家居。VR公司广州华锐…

Paper Reading:《Consistent-Teacher: 减少半监督目标检测中不一致的伪目标》

目录 简介工作重点方法ASA, adaptive anchor assignmentFAM-3D, 3D feature alignment moduleGMM, Gaussian Mixture Model实施细节 实验与SOTA的比较消融实验 总结 简介 题目&#xff1a;《Consistent-Teacher: Towards Reducing Inconsistent Pseudo-targets in Semi-supervi…

系统设计 - 我们如何通俗的理解那些技术的运行原理 - 第三部分:缓存

本心、输入输出、结果 文章目录 系统设计 - 我们如何通俗的理解那些技术的运行原理 - 第三部分&#xff1a;缓存前言缓存数据存储在什么地方图层说明 为什么 Redis 这么快&#xff1f;如何使用 Redis顶级缓存策略弘扬爱国精神 系统设计 - 我们如何通俗的理解那些技术的运行原理…

SystemVerilog学习(4)——自定义结构

一、 通过typedef来创建用户自定义类型 typedef语句可以用来创建新的类型。例如,你要求一个算术逻辑单元(ALU)在编译时可配置,以适应8比特、16比特,24比特或32比特等不同位宽的操作数。在Verilog中,你可以为操作数的位宽和类型分别定义一个宏(macro),如例2.32所示。 SV则提供了…

sqlmap --os-shell选项原理解析

文章目录 sqlmap --os-shell选项原理解析原理解析总结 sqlmap --os-shell选项原理解析 以sqli第一关为例。 --os-shell 是 SQLMap 工具的一个参数&#xff0c;用于在成功注入数据库后&#xff0c;执行操作系统命令并获取其输出。 sqlmap -u "http://192.168.188.199/sq…

100天掌握网络安全知识点!

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…

数据库基础(二)【MySQL】

文章目录 什么是数据库数据库是运行在操作系统中的软件 为什么需要数据库有哪些数据库MySQL 的体系架构网络连接层/API 层数据库服务层存储引擎层系统文件层 什么是 SQL参考资料 阅读前导&#xff1a;理论上数据库可以在操作系统和网络之前学习&#xff0c;但是这样会让学习层次…

全球国家行政区划边界(中国科学院地理科学与资源研究所)

简介&#xff1a; 行政区划边界是指各个行政区域之间划定的界限&#xff0c;以确保行政管理的有序和合法。通常&#xff0c;这些边界是根据政治、行政、文化等因素来划分的&#xff0c;如国家、省份、市级行政单元、县区等。这些行政区划边界的划分和调整需要经过政府的制定和…

Spring Security登录账户自定义与数据持久化(5)

1、用户自定义 在前面的案例中&#xff0c;我们的登录用户是基于配置文件来配置的(本质是基于内存)&#xff0c;但是在实际开发中&#xff0c;这种方式肯定是不可取的&#xff0c;在实际项目中&#xff0c;用户信息肯定要存入数据库之中。 Spring Security支持多种用户定义方…

面试题:谈谈过滤器和拦截器的区别?

文章目录 一、拦截器和过滤器的区别二、拦截器和过滤器的代码实现1、拦截器2、过滤器 三、总结1、什么是Filter及其作用介绍2、Filter API介绍3、Filter链与Filter生命周期 四、拦截器五、过滤器和拦截器的区别 一、拦截器和过滤器的区别 1、拦截器(Interceptor)只对action请求…

AdaBoost:增强机器学习的力量

一、介绍 机器学习已成为现代技术的基石&#xff0c;为从推荐系统到自动驾驶汽车的一切提供动力。在众多机器学习算法中&#xff0c;AdaBoost&#xff08;自适应增强的缩写&#xff09;作为一种强大的集成方法脱颖而出&#xff0c;为该领域的成功做出了重大贡献。AdaBoost 是一…

ESRI ArcGIS Pro 3.0-3.0.2图文安装教程及下载

ArcGIS 是由美国著名的地理信息系统公司 Esri 开发的一款地理信息系统软件。ArcGIS Pro是一款功能强大的单桌面 GIS 应用程序&#xff0c;是在桌面上创建和处理空间数据的基本应用程序。ArcGIS Pro支持数据可视化和数据高级分析&#xff0c;可以创建 2D 地图和3D 场景。它支持跨…

Qt扫盲-QBrush理论使用总结

Q 理论使用总结 一、概述1. 填充模式2. 笔刷颜色3. 纹理 二、 Qt::GlobalColor 一、概述 QBrush类定义了由 QPainter 绘制的形状的填充模式。画笔有样式、颜色、渐变和纹理。 brush style() 使用Qt::BrushStyle 枚举定义填充模式。默认的笔刷样式是 Qt::NoBrush(取决于你如何…

「2021年TYWZ普及模拟题」多边形 待定题解

文章目录 题目描述输入格式输出格式样例样例输入 1样例输出 1样例输入 2样例输出 2 数据范围与提示前置知识思路与部分实现完整代码文章小结 题目描述 一个凸多边形具有非常多优秀的性质&#xff0c;它的任意内角小于或等于 18 0 。 180^。 180。 。 小 F 将 n n n 条边交给…

UE5 Python脚本自动化Sequence Key帧

前言 码上1024了&#xff0c;给大家分享一个UE5的脚本小功能&#xff0c;UE5中Sequence动态Key功能&#xff0c;这样我们就可以根据我们的数据动态更新了&#xff0c;非常实用&#xff0c;适合刚入门或者小白&#xff0c;接下来我就把整个过程分享给大家。 过程 新建一个工程…