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℃的热固性碳纤维增强复合材料。热塑性碳纤维增强复合 材料也…

神经网络和AI的关系

神经网络&#xff08;Neural Networks&#xff09;和人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;之间存在紧密的关系&#xff0c;可以概括为以下几点&#xff1a; 神经网络是AI的子领域&#xff1a;神经网络是人工智能的一个子领域&#xff0c;它是…

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公司广州华锐…

Golang:反射机制reflect

目录 反射 基本概念 变量的内在机制 Go的反射三定律 反射的使用 空接口与反射 结构体与反射 函数与反射 反射的实际运用场景 反射

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则提供了…

运行stable-diffusion-xl-refiner-1.0遇到version `GLIBCXX_3.4.29‘ not found的问题

一、问题背景 https://huggingface.co/stabilityai/stable-diffusion-xl-refiner-1.0 在运行示例程序时候遇到GLIBCXX_3.4.29‘ not found diffusers to > 0.18.0 import torch from diffusers import StableDiffusionXLImg2ImgPipeline from diffusers.utils import loa…

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支持多种用户定义方…

C++中重载构造函数

C中重载构造函数 C 允许在同一作用域中的某个函数和运算符指定多个定义&#xff0c;分别称为函数重载和运算符重载。 重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明&#xff0c;但是它们的参数列表和定义&#xff08;实现&#xff09;不相同。…

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

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

全国跨境电商综试区评估结果出炉,上市公司业绩渐入佳境

据悉&#xff0c;全国跨境电商综试区现场会已于近日顺利召开。本次现场会关于国内跨境电商综试区考核评估结果也相继出炉&#xff0c;多地城市上榜&#xff0c;长沙挺进“第一档”阵营。随着对我国跨境电商发展机遇的把握&#xff0c;A股上市企业业绩纷纷抬头。 跨境电商综试区…