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;}
}

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

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

相关文章

医疗图像分割实践NNUnet-V2 基于window10+3090配置。官方数据Task_02

Window10 配置NNUnet完成官方任务分割 NNUnet论文介绍 nnUnet是一个针对医学图像分割提出得一个即开即用的框架&#xff0c;用户只需要按照官方给出的数据要求进行格式转换便可以进行快速的医学图像分割的训练和推演。其更新的V2版本代码变得更加易读和方便使用&#xff0c;并…

配置VScode开发环境-CUDA编程

如果觉得本篇文章对您的学习起到帮助作用&#xff0c;请 点赞 关注 评论 &#xff0c;留下您的足迹&#x1f4aa;&#x1f4aa;&#x1f4aa; 本文主要介绍VScode下的CUDA编程配置&#xff0c;因此记录以备日后查看&#xff0c;同时&#xff0c;如果能够帮助到更多人&#xf…

通达OA saas化改造

登录页增加选择单位下拉菜单 <tr height"37" class"login_field"><td align"center"><b>用户名</b> <input type"text" class"text" name"UNAME" size"15" onmouseover&qu…

AC修炼计划(AtCoder Regular Contest 165)

传送门&#xff1a;AtCoder Regular Contest 165 - AtCoder 本次习题参考了樱雪猫大佬的题解&#xff0c;大佬的题解传送门如下&#xff1a;Atcoder Regular Contest 165 - 樱雪喵 - 博客园 (cnblogs.com) A - Sum equals LCM 第一题不算特别难 B - Sliding Window Sort 2 对…

.NET Core/.NET6 使用DbContext 连接数据库,SqlServer

安装以下NuGet包 Microsoft.EntityFrameworkCore.SqlServer&#xff1a;SQL server 需要添加包 Microsoft.EntityFrameworkCore.Tools Newtonsoft.Json&#xff1a;用于Json格式转换 创建一个实体类来表示数据库表。在项目中创建一个名为Customer.cs的文件&#xff0c;并添加以…

【Linux】Ubuntu存储分析

文章目录 前言1 如何对系统进行存储分析2 如果出现存储空间不足的警告应该怎么办&#xff1f;3 存储空间太小导致不能开机怎么办&#xff1f;4 如何对系统进行扩容 前言 因为要编译一个ARM架构的Linux SDK&#xff0c;结果没想到这个SDK解压编译完大小远超我想象&#xff0c;直…

Flink学习之旅:(一)Flink部署安装

1.本地搭建 1.1.下载Flink 进入Flink官网&#xff0c;点击Downloads 往下滑动就可以看到 Flink 的所有版本了&#xff0c;看自己需要什么版本点击下载即可。 1.2.上传解压 上传至服务器&#xff0c;进行解压 tar -zxvf flink-1.17.1-bin-scala_2.12.tgz -C ../module/ 1.3.启…

【JVM】JVM的垃圾回收机制

JVM的垃圾回收机制 对象死亡判断方法引用计数算法可达性分析算法 垃圾回收算法标记清除法复制算法标记整理算法分代算法 Java运行时内存的各个区域,对于程序计数器,虚拟机栈,本地方法栈这三个部分区域而言,其生命周期与相关线程有关,随线程而生,随线程而灭,并且这三个区域的内存…

服务器数据恢复-RAID信息破坏导致服务器操作系统无法启动的数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器&#xff0c;8块硬盘组建了一组raid5磁盘阵列&#xff0c;服务器安装的是windows server操作系统&#xff0c;上层部署ORACLE数据库。 服务器故障&#xff1a; 在服务器运行过程中&#xff0c;2块硬盘报警&#xff0c;服务器操作系统…

MAC上设置IDEA如何一个窗口打开多个项目,多个tab

1、IDEA一个窗口打开多个项目 如果你打开了多个项目、每次切换都要半天&#xff0c;想让项目都汇聚到top栏 点击 Window - Merge All Project Windows 即可 但是这样比较挫&#xff0c;每次打开新的项目都还是会重新打开一个IDEA窗口 so&#xff0c;如何设置项目在同一个窗口…

手部关键点检测3:Pytorch实现手部关键点检测(手部姿势估计)含训练代码和数据集

手部关键点检测3&#xff1a;Pytorch实现手部关键点检测(手部姿势估计)含训练代码和数据集 目录 手部关键点检测3&#xff1a;Pytorch实现手部关键点检测(手部姿势估计)含训练代码和数据集 1. 前言 2.手部关键点检测(手部姿势估计)方法 (1)Top-Down(自上而下)方法 (2)Bot…

Minio 文件上传(后端处理同文件判断,同一文件秒传)

记录minio 文件上传 MinIO提供多个语言版本SDK的支持&#xff0c;下边找到java版本的文档&#xff1a; 地址&#xff1a;https://docs.min.io/docs/java-client-quickstart-guide.html maven依赖如下&#xff1a; XML <dependency><groupId>io.minio</groupId…

Liunx中系统安全及文件系统(极其粗糙版)

PS&#xff1a;下面知识点还很粗糙下次有时间再改 系统安全&#xff1a; 系统安全和数据防护&#xff0c;数据备份的资质 比如三台服务器&#xff1a; 500万 工信部是有要求的&#xff0c;组织必须保证处理的个人数据的安全性 品牌形象如何维护呢 基于liunx的安全加固措施…

【微信小程序】数字化会议OA系统之首页搭建(附源码)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《微信小程序开发实战》。&#x1f3af;&#x1f3a…

C++不用工具,如何检测内存泄漏?

C不用工具&#xff0c;如何检测内存泄漏&#xff1f; 大概12年前&#xff0c;在某外企 的时候&#xff0c;要做一个跨平台的office&#xff0c;即聚合了word Excel 以及 ppt等几大模块&#xff0c;代码大概200w行&#xff0c;我负责的就是内存泄漏这块最近很多小伙伴找我&#…

儿童疫苗接种:安全与注意事项

引言&#xff1a; 儿童的疫苗接种是维护其健康和预防传染病的重要措施。疫苗可以有效地保护儿童免受各种疾病的威胁&#xff0c;但在接种过程中需要家长和监护人特别关注一些注意事项&#xff0c;以确保接种的安全性和有效性。本文将深入探讨儿童疫苗接种的重要性&#xff0c;…

定制AI问答机器人前需要准备什么数据来训练AI模型?

AI问答机器人利用自然语言处理&#xff08;NLP&#xff09;技术来理解和回应用户的查询&#xff0c;能通过分析大量数据提供准确和相关的答案。要定制一个AI问答机器人&#xff0c;收集必要的资源和工具是至关重要的。获取用于训练模型的数据集是个关键的基础&#xff0c;然后通…

Linux常用命令——colrm命令

在线Linux命令查询工具 colrm 删除文件中的指定列 补充说明 colrm命令用于删除文件中的指定列。colrm命令从标准输入设备读取书记&#xff0c;转而输出到标准输出设备。如果不加任何参数&#xff0c;则colrm命令不会过滤任何一行。 语法 colrm(参数)参数 起始列号&#…

浅谈余压监控系统在住宅小区的应用方案

【摘要】&#xff1a; 本文分析了火灾发生时人员伤亡的主要原因——烟雾&#xff0c;并针对该原因提供切实可靠的系统应用解决方案&#xff0c;并通过具体案例&#xff0c;从设计依据、产品选型、系统组网、现场安装等方式介绍余压监控系统&#xff0c;希望可以在火灾发生时较大…

【Vue项目】通过设置全局的异常处理来统一处理后端返回的异常

文章目录 简介方法一创建统一异常处理模块使用axios拦截器处理异常在页面中使用异常处理 方法二创建全局异常处理函数在main.js中配置全局异常处理在网络请求中捕获异常 方法三创建全局异常处理插件在main.js中注册全局异常处理插件在网络请求中捕获异常 总结 简介 在Vue项目中…