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 实现下拉树形结构选择部门,支持多选,支持检索 <template><div><el-select v-model"multiple?choosedValue:choosedValue[0]" element-loading-background"rgba(0,0,0,0.8)":disabled"disableFl…...
招投标系统简介 企业电子招投标采购系统源码之电子招投标系统 —降低企业采购成本 tbms
功能模块: 待办消息,招标公告,中标公告,信息发布 描述: 全过程数字化采购管理,打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力,为外…...
半监督学习(主要伪标签方法)
半监督学习 1. 引言 应用场景:存在少量的有标签样本和大量的无标签样本的场景。在此应用场景下,通常标注数据是匮乏的,成本高的,难以获取的,与之相对应的是却存在大量的无标注数据。半监督学习的假设:决策…...
datePicker一个或多个日期组件,如何快捷选择多个日期(时间段)
elementUI的组件文档中没有详细说明type"dates"如何快捷选择一个时间段的日期,我们可以通过picker-options参数来设置快捷选择: <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 开发一个应用程序后,将应用程序提供给用户在其他计算机上使用就是应用程序的发布。应用程序发布一般会提供一个安装程序,将应用程序的可执行文件及需要的运行库…...
oracle容灾备份怎么样Oracle容灾备份
随着科学技术的发展和业务的增长,数据安全问题越来越突出。为了保证数据的完整性、易用性和保密性,公司需要采取一系列措施来防止内容丢失的风险。 Oracle是一个关系数据库管理系统(RDBMS),OracleCorporation是由美国软件公司开发和维护的。该系统功能…...
AcWing 4957:飞机降落
【题目来源】https://www.acwing.com/problem/content/4960/【题目描述】 有 N 架飞机准备降落到某个只有一条跑道的机场。 其中第 i 架飞机在 Ti 时刻到达机场上空,到达时它的剩余油料还可以继续盘旋 Di 个单位时间,即它最早可以于 Ti 时刻开始降落&…...
强化学习研究 PG
由于一些原因, 需要学习一下强化学习。用这篇博客来学习吧, 用的资料是李宏毅老师的强化学习课程。 深度强化学习(DRL)-李宏毅1-8课(全)_哔哩哔哩_bilibili 这篇文章的目的是看懂公式, 毕竟这是我的弱中弱。 强化…...
uniapp微信小程序 401时重复弹出登录弹框问题
APP.vue 登陆成功后,保存登陆信息 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非常火,我也去试了一下,感觉真的非常方便!我就以Python爬取B站各区排名前一百的视频,并作可视化来给大家分享一下Cloud Studio!应用链接:Cloud Studio实战——B站热门视频Top100爬虫应用开…...
php 去除二维数组重复
在 PHP 中,我们常常需要对数组进行处理和操作。有时候,我们需要去除数组中的重复元素,这里介绍一种针对二维数组的去重方法。 以下是列举一些常见的方法: 方法一:使用 array_map 和 serialize 函数 array_map 函数可以…...
玩转graphQL
转载至酒仙桥的玩转graphQL - SecPulse.COM | 安全脉搏 前言 在测试中我发现了很多网站开始使用GraphQL技术,并且在测试中发现了其使用过程中存在的问题,那么,到底GraphQL是什么呢?了解了GraphQL后能帮助我们在渗透测试中发现哪些…...
神经网络super(XXX, self).__init__()的含义
学习龙良曲老师的课程,在77节有这样一段代码 import torch from torch import nnclass Lenet5(nn.Module):def __init__(self):super(Lenet5,self).__init__()那么,super(XXX, self).init()的含义是什么? Python中的super(Net, self).init()…...
45.杜芬方程解仿真解曲线(matlab程序)
1.简述 Dufing方程是一种重要的动力系统山,是反映工程物理系统中非线性现象和混沌动力学行为的极其重要的方程式。通过Duffing方程可以探讨铁磁谐振电路中的分岔、拟周期运动、子谐波振荡。而在非线性与混沌系统的研究中,Duffing方程展示了丰富的混沌动力…...
服务器数据恢复-EXT3分区误删除邮件的数据恢复案例
服务器数据恢复环境: 一台服务器有一组由8块盘组建的RAID5阵列,EXT3文件系统。 服务器故障: 由于工作人员的误操作导致文件系统中的邮件丢失。用户需要恢复丢失的邮件数据。 服务器数据恢复过程: 1、将故障服务器中所有磁盘以只…...
C 语言的逗号运算符
逗号运算符 comma operator 逗号运算符最常用在 for 循环的循环头中. 程序示例: #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…...
无人车沿着指定线路自动驾驶与远程控制的实践应用
有了前面颜色识别跟踪的基础之后,我们就可以设定颜色路径,让无人车沿着指定线路做自动驾驶了,视频:PID控制无人车自动驾驶 有了前几章的知识铺垫,就比较简单了,也是属于颜色识别的一种应用,主要…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
