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

vue + elementUI 实现下拉树形结构选择部门,支持多选,支持检索

vue + elementUI 实现下拉树形结构选择部门,支持多选,支持检索

<template><div><el-select v-model="multiple?choosedValue:choosedValue[0]" element-loading-background="rgba(0,0,0,0.8)":disabled="disableFlag" @visible-change="visibleChange"filterable clearable collapse-tags :filter-method="filterMethod" @clear="clear" @remove-tag="removeTag":multiple="multiple" ref="selectRef" v-loading="loading" style="width: 100%"><el-option :label="option.name" :value="option.id" v-for="option in options" :key="option.id"class="optionClass"/><template v-slot:empty><div/></template><el-tree :props="treeProps" :load="loadNode" :data="treeData" :show-checkbox="multiple" @check="handleCheck":expand-on-click-node="false" @node-click="chooseNode" :filter-node-method="filterNodeMethod"class="treeClass" ref="treeRef" :node-key="'id'" :default-checked-keys="choosedValue"/></el-select></div>
</template><script>
import {getDwxxOfTree} from "@/api/commentTable/api";export default {name: "chooseUnitTree",props: {disableFlag: {Type: Boolean,required: false,default: false},value: {Type: Object,required: true},multiple: {Type: Boolean,required: false,default: false}},data() {return {treeProps: {label: 'name',value: 'id',children: 'children'},deptMap: {},treeData: [],options: [],loading: false,choosedValue: [],choosedOptions: [],}},computed: {},watch: {// choosedValue: {//   handler(n, o) {//     if (this.$refs.treeRef) {//       this.$refs.treeRef.filter()//     }//   },//   immediate: true,//   deep: true// }},mounted() {this.choosedValue = []this.getNodeData()},methods: {visibleChange(visible) {if (!visible) {this.$refs.treeRef.filter()}},removeTag(nodeId) {this.choosedValue = this.choosedValue.filter(item => item !== nodeId)this.choosedOptions = this.choosedOptions.filter(item => item.id !== nodeId)this.$refs.treeRef.setCheckedKeys(this.choosedValue, false)this.$emit('input', this.multiple ? this.choosedValue : this.choosedValue[0])},clear() {this.choosedValue = []this.choosedOptions = []this.$refs.treeRef.setCheckedKeys([], false)this.$emit('input', '')},filterMethod(keyWord) {this.$refs.treeRef.filter(keyWord)},filterNodeMethod(keyWord, node) {if (!keyWord) {return true}return (node.name + node.id).includes(keyWord)},init() {this.choosedValue = []if (typeof this.value === 'string') {this.choosedOptions.push(this.deptMap[this.value])this.choosedValue.push(this.value)} else {this.value.forEach(item => {this.choosedOptions.push(this.deptMap[item.id])this.choosedValue = this.value})}},getNodeData(resolve) {this.loading = truegetDwxxOfTree().then(dwxxResult => {// dwxxResult.data :// [{//   id  : "123456"//   name : "xx集团"//   pid : "000000"// }]this.loading = falseif (dwxxResult.data) {this.options = dwxxResult.dataconst rootDept = []this.deptMap = {}for (let deptInfo of dwxxResult.data) {this.deptMap[deptInfo.id] = deptInfo}for (let deptInfo of dwxxResult.data) {if (!this.deptMap[deptInfo.pid]) {rootDept.push(deptInfo)}}if (resolve) {resolve(rootDept)}} else {if (resolve) {resolve([])}}this.init()this.createTree(dwxxResult.data)})},createNodeChildren(node) {let children = []for (let deptId in this.deptMap) {let tmpNode = this.deptMap[deptId]if (tmpNode.pid === node.id) {children.push(this.createNodeChildren(tmpNode))}}node.children = childrenreturn node},createTree() {this.treeData = []for (let deptId in this.deptMap) {let node = this.deptMap[deptId]if (!this.deptMap[node.pid]) {this.treeData.push(this.createNodeChildren(node))}}},loadNode(node, resolve) {if (node.level === 0) {this.getNodeData(resolve)} else {const children = []for (let deptId in this.deptMap) {if (this.deptMap[deptId].pid === node.data.id) {children.push(this.deptMap[deptId])}resolve(children)}}},handleCheck(data, currentData) {this.choosedOptions = this.multiple ? [data] : currentData.checkedNodes // this.$refs.treeRef.getCheckedNodes(false, false)if (this.choosedOptions.length > 0) {const tempMap = {}this.choosedOptions.forEach(op => {tempMap[op.id] = op})let tmpOps = []this.choosedOptions.forEach(op => {if (!tempMap[op.pid]) {tmpOps.push(op)}})this.choosedOptions = tmpOpsthis.choosedValue = this.choosedOptions.map(item => item.id)} else {this.choosedValue = []}this.$emit('input', this.multiple ? this.choosedValue : this.choosedValue[0])},chooseNode(data) {this.choosedOptions = [data]this.choosedValue = [data.id]this.$emit('input', data.id)this.$refs.selectRef.visible = false}}
}
</script><style scoped lang="scss">
.optionClass {display: none;
}.treeClass {background: transparent;margin: 10px;
}
</style>

相关文章:

vue + elementUI 实现下拉树形结构选择部门,支持多选,支持检索

vue elementUI 实现下拉树形结构选择部门&#xff0c;支持多选&#xff0c;支持检索 <template><div><el-select v-model"multiple?choosedValue:choosedValue[0]" element-loading-background"rgba(0,0,0,0.8)":disabled"disableFl…...

招投标系统简介 企业电子招投标采购系统源码之电子招投标系统 —降低企业采购成本 tbms

​功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&#xff0c;为外…...

半监督学习(主要伪标签方法)

半监督学习 1. 引言 应用场景&#xff1a;存在少量的有标签样本和大量的无标签样本的场景。在此应用场景下&#xff0c;通常标注数据是匮乏的&#xff0c;成本高的&#xff0c;难以获取的&#xff0c;与之相对应的是却存在大量的无标注数据。半监督学习的假设&#xff1a;决策…...

datePicker一个或多个日期组件,如何快捷选择多个日期(时间段)

elementUI的组件文档中没有详细说明type"dates"如何快捷选择一个时间段的日期&#xff0c;我们可以通过picker-options参数来设置快捷选择&#xff1a; <div class"block"><span class"demonstration">多个日期</span><el…...

【语音合成】微软 edge-tts

目录 1. edge-tts 介绍 2. 代码示例 1. edge-tts 介绍 https://github.com/rany2/edge-tts 在Python代码中使用Microsoft Edge的在线文本到语音服务 2. 代码示例 import asyncio # pip install edge_tts import edge_tts TEXT """给我放首我喜欢听的歌曲…...

elevation mapping学习笔记3之使用D435i相机离线或在线订阅点云和tf关系生成高程图

文章目录 0 引言1 数据1.1 D435i相机配置1.2 协方差位姿1.3 tf 关系2 离线demo2.1 yaml配置文件2.2 launch启动文件2.3 数据录制2.4 离线加载点云生成高程图3 在线demo3.1 launch启动文件3.2 CMakeLists.txt3.3 在线加载点云生成高程图0 引言 elevation mapping学习笔记1已经成…...

ESP32 Max30102 (3)修复心率误差

1. 运行效果 2. 新建修复心率误差.py 代码如下: from machine import sleep, SoftI2C, Pin, Timer from utime import ticks_diff, ticks_us from max30102 import MAX30102, MAX30105_PULSE_AMP_MEDIUM from hrcalc import calc_hr_and_spo2BEATS = 0 # 存储心率 FINGER_F…...

16-4_Qt 5.9 C++开发指南_Qt 应用程序的发布

文章目录 1. 应用程序发布方式2. Windows 平台上的应用程序发布 1. 应用程序发布方式 用 Qt 开发一个应用程序后&#xff0c;将应用程序提供给用户在其他计算机上使用就是应用程序的发布。应用程序发布一般会提供一个安装程序&#xff0c;将应用程序的可执行文件及需要的运行库…...

oracle容灾备份怎么样Oracle容灾备份

随着科学技术的发展和业务的增长&#xff0c;数据安全问题越来越突出。为了保证数据的完整性、易用性和保密性&#xff0c;公司需要采取一系列措施来防止内容丢失的风险。  Oracle是一个关系数据库管理系统(RDBMS),OracleCorporation是由美国软件公司开发和维护的。该系统功能…...

AcWing 4957:飞机降落

【题目来源】https://www.acwing.com/problem/content/4960/【题目描述】 有 N 架飞机准备降落到某个只有一条跑道的机场。 其中第 i 架飞机在 Ti 时刻到达机场上空&#xff0c;到达时它的剩余油料还可以继续盘旋 Di 个单位时间&#xff0c;即它最早可以于 Ti 时刻开始降落&…...

强化学习研究 PG

由于一些原因&#xff0c; 需要学习一下强化学习。用这篇博客来学习吧&#xff0c; 用的资料是李宏毅老师的强化学习课程。 深度强化学习(DRL)-李宏毅1-8课&#xff08;全&#xff09;_哔哩哔哩_bilibili 这篇文章的目的是看懂公式&#xff0c; 毕竟这是我的弱中弱。 强化…...

uniapp微信小程序 401时重复弹出登录弹框问题

APP.vue 登陆成功后&#xff0c;保存登陆信息 if (res.code 200) {uni.setStorageSync(loginResult, res)uni.setStorageSync(token, res.token);uni.setStorageSync(login,false);uni.navigateTo({url: "/pages/learning/learning"}) }退出登录 toLogout: func…...

Cloud Studio实战——热门视频Top100爬虫应用开发

最近Cloud Studio非常火&#xff0c;我也去试了一下&#xff0c;感觉真的非常方便&#xff01;我就以Python爬取B站各区排名前一百的视频&#xff0c;并作可视化来给大家分享一下Cloud Studio&#xff01;应用链接&#xff1a;Cloud Studio实战——B站热门视频Top100爬虫应用开…...

php 去除二维数组重复

在 PHP 中&#xff0c;我们常常需要对数组进行处理和操作。有时候&#xff0c;我们需要去除数组中的重复元素&#xff0c;这里介绍一种针对二维数组的去重方法。 以下是列举一些常见的方法&#xff1a; 方法一&#xff1a;使用 array_map 和 serialize 函数 array_map 函数可以…...

玩转graphQL

转载至酒仙桥的玩转graphQL - SecPulse.COM | 安全脉搏 前言 在测试中我发现了很多网站开始使用GraphQL技术&#xff0c;并且在测试中发现了其使用过程中存在的问题&#xff0c;那么&#xff0c;到底GraphQL是什么呢&#xff1f;了解了GraphQL后能帮助我们在渗透测试中发现哪些…...

神经网络super(XXX, self).__init__()的含义

学习龙良曲老师的课程&#xff0c;在77节有这样一段代码 import torch from torch import nnclass Lenet5(nn.Module):def __init__(self):super(Lenet5,self).__init__()那么&#xff0c;super(XXX, self).init()的含义是什么&#xff1f; Python中的super(Net, self).init()…...

45.杜芬方程解仿真解曲线(matlab程序)

1.简述 Dufing方程是一种重要的动力系统山&#xff0c;是反映工程物理系统中非线性现象和混沌动力学行为的极其重要的方程式。通过Duffing方程可以探讨铁磁谐振电路中的分岔、拟周期运动、子谐波振荡。而在非线性与混沌系统的研究中&#xff0c;Duffing方程展示了丰富的混沌动力…...

服务器数据恢复-EXT3分区误删除邮件的数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器有一组由8块盘组建的RAID5阵列&#xff0c;EXT3文件系统。 服务器故障&#xff1a; 由于工作人员的误操作导致文件系统中的邮件丢失。用户需要恢复丢失的邮件数据。 服务器数据恢复过程&#xff1a; 1、将故障服务器中所有磁盘以只…...

C 语言的逗号运算符

逗号运算符 comma operator 逗号运算符最常用在 for 循环的循环头中. 程序示例&#xff1a; #include<stdio.h> #define FIRST_OZ 46 #define NEXT_OZ 20int main(void) {int ounces;float cost;printf("ounces cost\n");for (ounces 1, cost FIRST_OZ…...

无人车沿着指定线路自动驾驶与远程控制的实践应用

有了前面颜色识别跟踪的基础之后&#xff0c;我们就可以设定颜色路径&#xff0c;让无人车沿着指定线路做自动驾驶了&#xff0c;视频&#xff1a;PID控制无人车自动驾驶 有了前几章的知识铺垫&#xff0c;就比较简单了&#xff0c;也是属于颜色识别的一种应用&#xff0c;主要…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...