当前位置: 首页 > news >正文

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{this.choosedValue=[...new Set(this.choosedValue)]if(this.choosedValue.indexOf(this.myDepart.id)!=-1){this.choosedValue.forEach((item,index)=>{if(item==this.myDepart.id){this.choosedValue.splice(index,1)}})}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(this.choosedValue);}},// 点击树形选择节点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"]);}}} 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);}});}}},// 删除单个标签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;}
}

相关文章:

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

实现效果如下&#xff1a; 代码如下&#xff1a; html中 <el-col :lg"12"><el-form-item label"可用单位" prop"useOrgListTemp"><div class"departAll"><el-selectref"selectTree"v-model"valu…...

手机怎么监控电脑?

随着企业对电脑监控需求的增加&#xff0c;越来越多的管理者意识到使用电脑监控电脑的不便性&#xff0c;一旦外出就无法实时查看监控。其实可以用手机实现监控电脑的需求&#xff0c;只需在被监控端安装电脑监控软件后&#xff0c;将电脑设备和员工信息进行绑定&#xff0c;使…...

职场题:有一件特别紧急的事,群众要办理,且联系不上领导,你怎么办?(2)

接1所写 如果无法联系上领导且有一项特别紧急的事情需要办理&#xff0c;以下是进一步的建议&#xff1a; 11. 尝试其他沟通渠道&#xff1a;除了直接联系领导外&#xff0c;尝试通过其他沟通渠道与领导取得联系。这可能包括电子邮件、即时通讯工具或其他内部通信平台。确保详…...

《深入理解java虚拟机 第三版》学习笔记一

第 2 章 Java 内存区域与内存溢出异常 2.2 运行时数据区域 Java 虚拟机在执行 Java 程序的过程中会把它所管理的内存划分为若干个不同的数据区域。这些区域有各自的用途&#xff0c;以及创建和销毁的时间&#xff0c;有的区域随着虚拟机进程的启动而一直存在&#xff0c;有些…...

webGL编程指南 第三章 旋转三角形

我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写&#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 接着 上一节 接着做平移的转化。本案例是三角形的旋转 <!DOCTYPE html> <html lang"en"><head…...

网络安全是什么?一文认识网络安全

一、网络安全 1.概念 网络安全从其本质上讲就是网络上的信息安全&#xff0c;指网络系统的硬件、软件及数据受到保护。不遭受破坏、更改、泄露&#xff0c;系统可靠正常地运行&#xff0c;网络服务不中断。 &#xff08;1&#xff09;基本特征 网络安全根据其本质的界定&#…...

LeetCode 2897. 对数组执行操作使平方和最大【贪心,位运算,哈希表】2301

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

linux加密安全和时间同步

sudo实现授权 添加 vim /etc/sudoers luo ALL(root) /usr/bin/mount /deb/cdrom /mnt/ test ALL(root:ALL) ALL 在所有主机上 提权为root用户&#xff0c; 可以执行所有命令 户"test"被授权以"root"用户身份在任意主机上执行任意命令 切换luo用户使用 su…...

在Go中处理异常

引言 程序遇到的错误大致分为两类:程序员预料到的错误和程序员没有预料到的错误。我们在前两篇关于[错误处理]的文章中介绍的error接口主要处理我们在编写Go程序时预期的错误。error接口甚至允许我们承认函数调用发生错误的罕见可能性&#xff0c;因此我们可以在这些情况下进行…...

rust 全局变量

文章目录 编译期初始化静态常量静态变量原子类型 运行期初始化lazy_staticBox::leak从函数中返回全局变量 标准库中的 OnceCell 编译期初始化 静态常量 const MAX_ID: usize usize::MAX / 2; fn main() {println!("用户ID允许的最大值是{}",MAX_ID); }关键字是co…...

使用Python的qrcode库生成二维码

使用Python的qrcode库生成二维码 此二维码直接跳转对应的网址。 1、首先安装qrcode包 pip install qrcode2、运行代码 import qrcode# 需要跳转的URL url "https://blog.csdn.net/weixin_45092662?typeblog" img qrcode.make(url) img.save("qrcode.png&…...

MSQL系列(四) Mysql实战-索引分析Explain命令详解

Mysql实战-索引分析Explain命令详解 前面我们讲解了索引的存储结构&#xff0c;我们知道了BTree的索引结构&#xff0c;也了解了索引最左侧匹配原则&#xff0c;到底最左侧匹配原则在我们的项目中有什么用&#xff1f;或者说有什么影响&#xff1f;今天我们来实战操作一下&…...

FPGA软件【紫光】

软件&#xff1a;编程软件。 注册账号需要用到企业邮箱 可以使用【企业微信】的邮箱 注册需要2~3天&#xff0c;会收到激活邮件 授权&#xff1a; 找到笔记本网卡的MAC&#xff0c; 软件授权选择ADS 提交申请后&#xff0c;需要2~3天等待邮件通知。 使用授权&#xff1a; 文…...

饲料化肥经营商城小程序的作用是什么

我国农牧业规模非常高&#xff0c;各种农作物和养殖物种类多&#xff0c;市场呈现大好趋势&#xff0c;随着近些年科学生产养殖逐渐深入到底层&#xff0c;专业的肥料及饲料是不少从业者需要的&#xff0c;无论城市还是农村都有不少经销店。 但在实际经营中&#xff0c;经营商…...

AI系统ChatGPT源码+详细搭建部署教程+支持GPT4.0+支持ai绘画(Midjourney)/支持OpenAI GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统AI绘画系统&#xff0c;支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署…...

vue项目优雅降级,es6降为es5,适应低版本浏览器渲染

非vue项目 ECMAScript 6(ES6)的发展速度非常之快&#xff0c;但现代浏览器对ES6新特性支持度不高&#xff0c;所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。 Babel是一个广泛使用的转码器&#xff0c;babel可以将ES6代码完美地转换为ES5代码&#xff0c;所…...

运放供电设计

文章目录 运放供电设计如何产生负电压BUCK电路BOOST电路产生负电压FLYBUCK产生负电压 运放供电设计 注&#xff1a;使用0.1u跟10u并联 如何产生负电压 问题&#xff1a;电流小&#xff0c;使用并联方式改善&#xff0c;缺点价格贵&#xff0c;淘宝上买的都是假货ICL7662多是用…...

vue2-org-tree 树型结构的使用

vue2-org-tree 用于创建和显示组织结构树状图&#xff0c;帮助开发者轻松地可视化组织结构&#xff0c;例如公司的层级、部门之间的关系、团队成员等。其主要功能有&#xff1a;自定义节点、可折叠节点、支持拖放、搜索、导航等功能。 这里我们主要使用 vue2-org-tree 进行多次…...

【计算机网络】(面试问题)路由器与交换机的比较

路由器与交换机比较 内容主要参考总结自《计算机网络自顶向下第七版》P315 两者均为存储-转发设备: 路由器: 网络层设备 (检测网络层分组首部) 交换机: 链路层设备 (检测链路层帧的首部) 二者均使用转发表: 路由器: 利用路由算法(路由协议)计算(设置), 依据IP地址 交换机…...

基于下垂控制的孤岛双机并联逆变器环流抑制模型(Simulink仿真实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

XInput1_4.dll缺失怎么修复?2026年最新官方安全修复指南

XInput1_4.dll缺失怎么修复&#xff1f;2026年最新官方安全修复指南当你满心欢喜地连接好Xbox手柄&#xff0c;准备沉浸到最新游戏的紧张对决中&#xff0c;屏幕上却突然弹出“找不到XInput1_4.dll”或“XInput1_4.dll丢失”的错误提示&#xff0c;这确实让人瞬间扫兴。这个报错…...

解决图像修复与纹理合成难题的Resynthesizer:开源智能填充工具全指南

解决图像修复与纹理合成难题的Resynthesizer&#xff1a;开源智能填充工具全指南 【免费下载链接】resynthesizer Suite of gimp plugins for texture synthesis 项目地址: https://gitcode.com/gh_mirrors/re/resynthesizer 在数字图像处理领域&#xff0c;我们经常面临…...

Java微服务Istio配置必须立即更新的4个安全补丁:CVE-2024-23652等高危漏洞绕过配置详解

第一章&#xff1a;Java微服务Istio配置安全补丁的紧急性与背景近年来&#xff0c;Java微服务架构在云原生环境中广泛应用&#xff0c;而Istio作为主流服务网格控制平面&#xff0c;承担着流量管理、可观测性与零信任安全策略实施的关键角色。然而&#xff0c;2024年披露的CVE-…...

Jetson平台高温警告静默指南:深入解析notify_disable与nvpmodel_indicator.py

1. 为什么需要关闭Jetson的高温警告 当你把Jetson设备用在嵌入式系统或者工业自动化场景时&#xff0c;那个频繁弹出的"Caution - Hot surface. Do not touch"警告可能会让人抓狂。我去年在一个智能监控项目上就遇到过这种情况——设备在户外机箱里持续运行&#xff…...

2025平航杯电子取证实战:从木马溯源到服务器渗透的完整链条分析

1. 木马溯源&#xff1a;从可疑流量到攻击者定位 2025年4月&#xff0c;杭州滨江警方接到一起特殊报案。市民刘晓倩&#xff08;化名倩倩&#xff09;发现自己的手机出现异常发热、电量消耗过快等现象&#xff0c;怀疑设备被人监控。这个看似普通的个人隐私案件&#xff0c;最终…...

Legacy-iOS-Kit:让旧设备重获新生的开源解决方案

Legacy-iOS-Kit&#xff1a;让旧设备重获新生的开源解决方案 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to restore/downgrade, save SHSH blobs, jailbreak legacy iOS devices, and more 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit 当你的…...

QMK Toolbox终极指南:5步完成机械键盘固件刷写与自定义

QMK Toolbox终极指南&#xff1a;5步完成机械键盘固件刷写与自定义 【免费下载链接】qmk_toolbox A Toolbox companion for QMK Firmware 项目地址: https://gitcode.com/gh_mirrors/qm/qmk_toolbox QMK Toolbox是一款专为机械键盘爱好者设计的开源固件刷写工具&#xf…...

终极指南:DXVK如何彻底改变Linux游戏体验的5大关键优势

终极指南&#xff1a;DXVK如何彻底改变Linux游戏体验的5大关键优势 【免费下载链接】dxvk Vulkan-based implementation of D3D8, 9, 10 and 11 for Linux / Wine 项目地址: https://gitcode.com/gh_mirrors/dx/dxvk 在Linux上畅玩Windows独占3D游戏曾经是天方夜谭&…...

如何评估单网页SEO的ROI

如何评估单网页SEO的ROI 在当今的数字化时代&#xff0c;网站的成功与否往往取决于其搜索引擎优化&#xff08;SEO&#xff09;的效果。而在SEO的众多策略中&#xff0c;单网页SEO的ROI&#xff08;投资回报率&#xff09;评估尤为重要。了解如何评估单网页SEO的ROI&#xff0…...

Ostrakon-VL像素终端实操:自定义扫描任务清单配置方法

Ostrakon-VL像素终端实操&#xff1a;自定义扫描任务清单配置方法 1. 像素特工终端介绍 Ostrakon-VL像素终端是一款专为零售与餐饮场景设计的智能扫描工具&#xff0c;采用独特的8-bit像素风格界面&#xff0c;将复杂的图像识别任务转化为直观有趣的"特工任务"。基…...