一个简单的联系人及组织架构选择人员的实现

article/2025/7/12 16:36:34

前言:技术实现:Vite+vue3+ts+vant。
本次主要是因为本人说了一个类似的功能,前期遇到了很多坑,导致 进度缓慢。虽然可以实现,但是都基于多个数组操作的情况,当涉及功能修改或优化,就很难实现了。 本文实现的demo基于一个很简单的思路,但是不常用很容易忽略或don’t kown。

思路:在闯入一个数组绑定复选框时,让vant中的checkbox组件进行回显选中。此时取消其中一个,并不会 影响其他不存在checkbox中的id。

gittee:需要私聊吧

操作gif:
在这里插入图片描述

思路对应img:
请添加图片描述
请添加图片描述

请添加图片描述

注:其中肯定有很多有问题以及bug,ts运用还不娴熟,存在不少any。如有问题,请指正。(主要提供一个思路)


http://chatgpt.dhexx.cn/article/A8okPcuY.shtml

相关文章

jQuery仿钉钉组织架构的选择部门功能,移动端完美树形图

在网上找了好久&#xff0c;实在没见到有类似的只能自己写一个一、功能如图所示&#xff0c;点击选择无限下级功能 二、css <style>body{margin:0;padding:0;background:#ffffff}.spaceBetween {display: flex;justify-content: space-between;align-items: center;}.su…

vue的el-tree实现部门人员的tree展示选择,包括根据已有id进行默认选中设置

根据部门和人员&#xff0c;生成部门人员选择树&#xff0c;用的是Vue的el-tree生产树。 java部分------------------------------------------------------------------------------- 1&#xff1a;中间实体dto&#xff08;就是前端要的字段&#xff0c;让从数据库中查询的时…

Java+zTree审批人员选择

实现一个类似于钉钉审批人员选择的功能。 这里使用zTree实现组织架构树。 实体类需要有id,pId实现上下级关系。 company.java getter/setter略。 private int company_id;//公司idprivate String company_name;//公司名称private String remark;//备注信息private String f…

element-tree 实现部门-人员选择(支持ID相同)

使用element-tree实现id相同的选择 相同人员可在不同部门出现, 当勾选其中一个人员时,其它部门的相同人员也要勾选上右侧可进行删除已勾选人员, 并且树状图勾选状态取消若有勾选,进入时候默认选中 效果如下: 例如: 点击勾选总经办的王五,技术部的王五也要勾选上,右侧删除王五…

【Mobile Org】适用于移动端/H5的组织部门/角色/人员选择组件

Mobile Org Introduction 移动端组织架构数据选择方案&#xff0c;包括组织机构、角色以及人员等分类&#xff0c;支持单选、多选、关键字段自定义以及多种事件及插槽等&#xff0c;适用于大部分组织选人场景。 支持懒加载回调&#xff0c;点击获取当前组织下的子组织及人员…

使用VUE自定义组件封装部门选择功能

背景 照惯例&#xff0c;先交待下背景&#xff0c;从真实需求出发&#xff0c;讲述实现效果、设计思路和实现方式。 软件系统中&#xff0c;会有一些常见常用的选择功能&#xff0c;如部门选择、人员选择等&#xff0c;用于填报表单&#xff0c;使用频率很高。直接使用一方面会…

选择部门(多层级)下人员

一、顶部部门选中标题栏&#xff08;部门面包屑&#xff09; 1.使用水平滚动的ListView&#xff08;HorizontalListView&#xff09;&#xff0c;代码搜索一下就能找到&#xff0c; 2.右监听可以使用符号文字>&#xff08;代码&#xff1a;>&#xff09;&#xff0c;也…

阿里云成立13年首次实现年度盈利;iPhone14有望实现息屏显示;Android 13将采用华为研发的只读文件系统 |EA周报...

EA周报 2022年5月27日 每个星期7分钟&#xff0c;元宝带你喝一杯IT人的浓缩咖啡&#xff0c;了解天下事、掌握IT核心技术。 周报看点 1、成立13年首次年度盈利&#xff0c;阿里云2022财年赚11亿 2、博通官宣610亿美元收购VMware 3、Android 13 将默认采用华为开发的只读文件系统…

【ELT.ZIP】OpenHarmony啃论文俱乐部—数据密集型应用内存压缩

本文出自ELT.ZIP团队&#xff0c;ELT<>Elite(精英)&#xff0c;.ZIP为压缩格式&#xff0c;ELT.ZIP即压缩精英。成员&#xff1a; 上海工程技术大学大二在校生合肥师范学院大二在校生清华大学大二在校生成都信息工程大学大一在校生黑龙江大学大一在校生华南理工大学大一在…

Nydus 镜像扫描加速

文&#xff5c;余硕 上海交通大学22届毕业生 阿里云开发工程师 从事云原生底层系统的开发和探索工作。 本文 6369 字 阅读 16 分钟 GitLink 编程夏令营是在 CCF 中国计算机学会指导下&#xff0c;由 CCF 开源发展委员会&#xff08;CCF ODC&#xff09;举办的面向全国高校学生的…

定了,6大领域93个开源任务,阿里开源导师带你参与中科院开源之夏2022

今年&#xff0c;由阿里巴巴开源导师参与的30个核心开源社区再次加入中国科学院软件研究所开源软件供应链点亮计划支持下的系列高校开源活动——开源之夏2022&#xff0c;共开放93个开源任务。通过本活动&#xff0c;同学们可以在顶级开源导师的指导下&#xff0c;通过3个月的时…

龙蜥操作系统 Anolis OS 8.6 - 来自阿里云的 CentOS 8 100% 兼容发行版

请访问原文链接&#xff1a;https://sysin.org/blog/anolis-os-8/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;www.sysin.org Anolis OS 8 是 OpenAnolis 社区推出的完全开源、中立、开放的发行版&#xff0c;它支持多计算架构&#x…

remove是什么意思计算机语言,remove是什么意思?remove是什么意思?

remove()是C语言中的函数&#xff0c;一般作用是删除数组、链表对象所有的元素。函数原型是intremove(char*filename)。 函数功能 remove()函数用于删除指定的文件&#xff0c;其原型如下&#xff1a; int remove(char *filename); 函数声明2&#xff1a; templateinline bool …

Linux 知:文件系统

文章目录 1. 前言2. 文件2.1. 一切皆文件2.2. 文件属性2.3. 目录结构2.4. 文件路径 3. 文件系统3.1. 文件系统种类3.2. 文件系统特性3.2.1. 格式化3.2.2. 格式 3.3. EXT 族文件系统3.3.1. EXT2 文件系统3.3.1.1. data block&#xff08;数据区块&#xff09;3.3.1.2. inode tab…

8 亿邮件地址泄露,源于邮件验证服务;腾讯推出微信公众号直播工具

(给技术最前线加星标&#xff0c;每天看技术热点) 转自&#xff1a;开源中国、solidot、cnBeta、腾讯科技、快科技等 【技术资讯】 0、8 亿邮件地址遭泄露&#xff0c;源于邮件验证服务 近日&#xff0c;Security Discovery 安全研究人员 Bob Diachenko 发现了一个150 GB 大小、…

LWN: 5.17 合并窗口第一部分!

关注了就能看到更多这么棒的文章哦&#xff5e; 5.16 Merge window, part 1 By Jonathan CorbetNovember 4, 2021DeepL assisted translationhttps://lwn.net/Articles/874683/ 截止到撰写此文的时候&#xff0c;Linus Torvalds 已经为 5.16 版本内核而向内核合入了 6800 个 no…

Linux出现Read-only file system错误解决方法

执行命令时遇到如下错误 这个问题是文件系统受损导致得&#xff0c;fstab文件未正确配置 解决方法&#xff1a; df -hT  #查看一下分区及挂载信息 fsck -a /dev/sda3  -a &#xff1a;检查文件系统&#xff0c;有异常便自动修复 执行完毕之后重启服务器 reboot 进入服务器&…

只需 6 步,你就可以搭建一个云原生操作系统原型

编者按&#xff1a;过去的三年对基础软件领域来说是不平凡的三年&#xff0c;是波涛汹涌的三年。随着国际形势和行业格局的变化&#xff0c;大家一定充分感受到了云原生和操作系统这两个话题的热度。那么当云原生和操作系统这两个热点话题相遇的时候&#xff0c;会发生什么故事…

Linux 内核源代码情景分析(四)

系列文章目录 Linux 内核设计与实现 深入理解 Linux 内核 Linux 设备驱动程序 Linux设备驱动开发详解 深入理解Linux虚拟内存管理 Linux 内核源代码情景分析&#xff08;一&#xff09; Linux 内核源代码情景分析&#xff08;二&#xff09; Linux 内核源代码情景分析&#xff…

TWS蓝牙耳机推荐哪个?2022国产无线蓝牙耳机推荐

随着各大手机厂商逐渐取消了传统的耳机插孔后&#xff0c;就有越来越多的人开始使用蓝牙耳机了。即使是过去一直觉得蓝牙耳机不太实用&#xff0c;最后也无法摆脱“真香理论”&#xff01;&#xff01;在蓝牙技术的快速发展的今天&#xff0c;蓝牙耳机在连接性能和音质方面取得…