vue实现下拉多选、可搜索、全选功能

news2025/1/3 15:52:26

最后的效果就是树形的下拉多选,可选择任意一级选项,下拉框中有一个按钮可以实现全选,也支持搜索功能。

在mounted生命周期里面获取全部部门的数据,handleTree是讲接口返回的数据整理成树形结构,可以自行解决

             <div class="LeftText">
                <span style="color: red; margin-right: 4px">*</span>部门:
              </div>
              <el-select
                v-model="executiveDepartName"
                filterable
                :filter-method="selectChange"
                multiple
                @visible-change="visibleChange"
                @remove-tag="seleRemoveTag"
                style="width: 80%"
              >
                <el-option style="display: none" value=""></el-option>
                <el-checkbox
                  style="
                    width: 100%;
                    height: 40px;
                    line-height: 40px;
                    padding-left: 20px;
                    border-bottom: 1px solid #dcdfe6;
                  "
                  class="allselect"
                  :indeterminate="isIndeterminate"
                  v-model="allSelectModule"
                  @change="allselect"
                  >全选</el-checkbox
                >

                <el-cascader-panel
                  ref="cascaderModule"
                  :key="deptList.length"
                  :options="deptList"
                  @change="cascaderChange"
                  style="width: 80%"
                  :props="props"
                  filterable
                  :border="false"
                  :show-all-levels="false"
                  v-model="executiveDepartment"
                >
                </el-cascader-panel>
              </el-select>
            </div>

     props: {
        multiple: true,
        value: "deptId",
        label: "deptName",
        checkStrictly: true,
        emitPath: false,
      },   
    allDeptList:[];//所有的部门信息,内部结构为:{deptId:1,deptName:"一级部门"}
    isSeach:false;//是否搜索状态
    tempExecutive:[];// 搜索前已选中的数据
    //搜索查询事件--是因为在cascaderChange事件中,对v-model的值重新赋值,导致下拉选时,会触发el-select的搜索事件,所以加了一个isFilter判断
    selectChange(val) {
      if (val !== "") {
        this.deptList = [];
        this.deptList = this.allDeptList.filter((item) => {
          return item.deptName.toLowerCase().indexOf(val.toLowerCase()) > -1;
        });
        this.isSeach = true;
        this.tempExecutive = this.executiveDepartment;
      } else {
        if (!this.isFilter) {
          this.deptList = this.handleTree(this.allDeptList, "deptId");
          this.isFilter = !this.isFilter;
        }
      }
    },
    visibleChange(e) {
      if (e) {
        this.isSeach = false;
        this.isFilter = false;
        this.deptList = this.handleTree(this.allDeptList, "deptId");
        this.initStatus();
      }
    },
    对全选状态进行重新赋值
    initStatus() {
      if (this.executiveDepartment.length == this.allDeptList.length) {
        this.allSelectModule = true;
        this.isIndeterminate = false;
      } else if (this.executiveDepartment.length == 0) {
        this.allSelectModule = false;
        this.isIndeterminate = false;
      } else {
        this.allSelectModule = false;
        this.isIndeterminate = true;
      }
    },
    //select框里回显的是选中部门的名称
    getDeptName() {
      const result = [];
      this.executiveDepartment.filter((item) => {
        this.allDeptList.map((i) => {
          if (item == i.deptId) {
            result.push(i.deptName);
          }
        });
      });
      return result;
    },
    seleRemoveTag(val) {
      if (val) {
        const result = this.allDeptList.find((item) => {
          if (item.deptName == val) {
            return item;
          }
        });
        this.executiveDepartment = this.executiveDepartment.filter(
          (item) => item !== result.deptId
        );
      }
    },
    // 下拉多选选中时触发的事件
    cascaderChange() {
      this.isFilter = true;
      //如果是搜索状态,讲之前选中的值和搜素状态下的值进行合并和去重,否则,之前选中的值会被清空
      if (this.isSeach) {
        this.executiveDepartment = [
          ...new Set([...this.tempExecutive, ...this.executiveDepartment]),
        ];
      }
      this.executiveDepartName = this.getDeptName();
      this.initStatus();
    },
    //全选事件
    allselect() {
      if (this.allSelectModule) {
        this.isIndeterminate = false;
        if (this.isSeach) {
          this.executiveDepartment = this.deptList.map((item) => item.deptId);
          this.executiveDepartName = this.getDeptName();
        } else {
          this.executiveDepartment = this.getAllIds(this.deptList);
          this.executiveDepartName = this.getDeptName();
        }
      } else {
        this.executiveDepartment = [];
        this.executiveDepartName = [];
      }
    },
    getAllIds(nodes) {
      let ids = [];
      (function getIds(nodes) {
        nodes.forEach((node) => {
          ids.push(node.deptId);
          if (node.children && node.children.length) {
            getIds(node.children);
          }
        });
      })(nodes);
      return ids;
    },

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在 Unity 6 中为您的世界创建全局照明的新方法(三)

本文是Unity 6全局光照功能介绍系列中的最后一篇文章&#xff0c;在上篇文章中我们为大家介绍了关于使用沙漠绿洲场景创建实时光照的案例&#xff0c;在本文中我们将承接上篇文章继续为大家介绍如何使用Unity 6中的APV探针功能在URP管道中的另一个案例“花园场景”中创建实时光…

《计算机组成及汇编语言原理》阅读笔记:p116-p120

《计算机组成及汇编语言原理》学习第 7 天&#xff0c;p116-p120 总结&#xff0c;总计 5 页。 一、技术总结 1.CPU优化 (1)increase overall performance number 例如&#xff1a;16位电脑提升到32位电脑。 (2)multiprocessing One way to make computers more useful i…

Python的简单爬虫框架

爬虫为网络爬虫&#xff08;又称为网页蜘蛛&#xff0c;网络机器人&#xff0c;在FOAF社区中间&#xff0c;更经常的称为网页追逐者&#xff09;&#xff0c;是一种按照一定的规则&#xff0c;自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、…

优化站群SEO:使用苹果CMS泛目录插件实现泛目录页面刷新不变

优化站群SEO&#xff1a;使用苹果CMS泛目录插件实现泛目录页面刷新不变 在当今数字营销环境中&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;是提升网站流量和可见性的关键策略。苹果CMS作为一款灵活的内容管理系统&#xff0c;提供了丰富的插件功能&#xff0c;尤其是…

Spring Cloud由入门到精通

文章目录 1.初识微服务1.1. 单体架构1.2.分布式架构1.3.微服务1.4 微服务技术比对1.5.Spring Cloud1.6. 总结2.服务拆分和远程调用2.1.服务拆分原则2.2.服务拆分示例2.2.1.项目工程结构设计2.2.2.创建Maven项目工程2.3.实现远程调用案例2.3.1.案例需求:2.3.2. 注册 Rest Templ…

【RK3588 Linux 5.x 内核编程】-内核I2C子系统介绍

内核I2C子系统介绍 文章目录 内核I2C子系统介绍1、内核中的I2C子系统2、内核中的I2C驱动2.1 获取I2C适合器2.2 创建i2c_board_info与设备2.3 创建设备ID和I2C驱动2.4 数据传输2.4.1 发送数据2.4.2 读取数据3、I2C总线如何工作I2C 是一种用于双线接口的串行协议,用于连接低速设…

GPIO相关寄存器,点灯

目录 一.输入模式 1.浮空输入 2.上拉输入 3.下拉输入 4.模拟输入 二.输出模式 1.推挽输出 2.开漏输出 三.寄存器 1.寄存器的作用 2.功能与类型 3.控制某一引脚输出电压来点灯所需要控制的寄存器 1.打开对应时钟开关 2.端口模式寄存器 ---输出模式 3.输出类型寄存…

【基础篇】三、MySQL表结构的操作

文章目录 Ⅰ. 创建表1、语法2、创建表样例3、创建和其它表一样结构的表 Ⅱ. 查看表结构1、查看数据库中的表2、查看指定表的属性3、获取表的创建语句 Ⅲ. 删除表Ⅳ. 修改表结构1、向表中插入新的字段2、删除表中的字段3、修改表名4、修改字段属性 Ⅰ. 创建表 1、语法 create …

Ethernet 系列(12)-- 基础学习::SOME/IP

目录 1. SOME/IP简介&#xff1a; 1.1 什么是SOME/IP&#xff1a; 1.2 什么时候使用SOME/IP&#xff1a; 2. SOME/IP的特点&#xff1a; 2.1 序列化&#xff1a; 2.2 远程过程调用&#xff08;RPC&#xff09;: 2.3 服务发现&#xff1a; 2.4 发布/订阅&#xff1a; 2.5 UDP消息…

前端小案例——轮播图(HTML+CSS+JS, 附源码)

一、前言 实现功能&#xff1a; 显示多张图片&#xff0c;每张图片占据轮播图容器的一部分空间。实现向左和向右的切换按钮&#xff0c;可以点击按钮切换到上一张或下一张图片。在底部显示小圆点&#xff0c;表示当前显示的图片&#xff0c;点击小圆点可以跳转到对应的图片。…

vue封装弹窗元素拖动指令

项目开发过程中我们通常会遇到需要到一些弹窗鼠标可以随意拖动位置去放置&#xff0c;vue里面直接通过封装对应的指令即可&#xff0c;于是封装了一个出来&#xff0c;希望可以用到。 Vue.directive(draggable-dom, draggableDom); 组件节点添加对应指令就可以 v-draggable-…

Supermap iClient Webgl 粒子特效案例-消防场景

作者&#xff1a;Lzzzz 前言 WebGL 粒子特效的应用场景非常广泛&#xff0c;几乎可以在任何需要丰富视觉效果或动态表现的地方看到其身影。通过灵活运用颗粒系统&#xff0c;开发者可以创造出引人入胜的用户体验和视觉表现。 一、效果展示 二、实现步骤 1&#xff0c;构建…

关于无线AP信道调整的优化(锐捷)

目录 一、信道优化的基本原则二、2.4G频段信道优化三、5G频段信道优化四、信道优化代码具体示例五、其他优化措施 一、信道优化的基本原则 信道优化旨在减少信道间的干扰&#xff0c;提高网络覆盖范围和信号质量。基本原则包括&#xff1a; 1. 选择合适的信道&#xff1a;根据…

Rocky9网络基本连接配置

1.修改主机名称 终端模式下&#xff1a; hostnamectl set-hostname server2执行过程中可能要输入密码 hostnamectl命令查看主机信息&#xff0c;可以查看到主机信息已经发生修改&#xff0c;之后reboot重启主机。 2.关闭防火墙 systemctl stop firewalld systemctl disable fi…

一款汽车连接器(HSD(4+2))信号完整性仿真

下面是一款汽车连接器HSD(42) 的3D外形&#xff1a; 其爆炸图如下&#xff1a; 下面是Rosenboger同款产品的2D图&#xff1a; 其信号完整性参数如下&#xff1a; 下面介绍一下如何给上面的3D模型做信号完整性仿真。 在介绍仿真前先介绍一下上面的一些参数&#xff1a;上面的参数…

动手做计算机网络仿真实验入门学习

打开软件 work1 添加串行接口模块&#xff0c;先关电源&#xff0c;添加之后再开电源 自动选择连接 所有传输介质 自动连接 串行线 绿色是通的&#xff0c;红色是不通的。 显示接口。se是serial串行的简写。 Fa是fast ethernet的简写。 为计算机配置ip地址&#xff1a; 为服…

在React中引入tailwind css(图文详解)

Tailwind CSS 是一个功能强大的 CSS 框架&#xff0c;旨在使开发者能够以更高效、灵活的方式创建现代、响应式的网页。与传统的 CSS 框架&#xff08;如 Bootstrap 或 Foundation&#xff09;不同&#xff0c;Tailwind 采取了“实用类”&#xff08;Utility-First&#xff09;的…

考公怎么安排学习顺序?

考公的学习顺序安排至关重要&#xff0c;合理规划能让备考事半功倍。以下是结合 “稳啦” 小程序的推荐学习顺序。 1. 初步了解考情&#xff08;使用稳啦的各省考情模块&#xff09; 在备考初期&#xff0c;首先要做的就是全面了解公务员考试的基本情况。通过稳啦的各省考情模…

C 语言:printf 函数详解

目录 引言 一、printf 函数的基本介绍 二、printf 的格式化输出 三、printf 的转义序列 四、printf 的返回值 五、printf 的高级用法 六、printf 的注意事项 七、总结 引言 在 C 语言的编程世界里&#xff0c;printf函数无疑是一个极为强大且常用的工具。它不仅能够输出…

计算机网络-L2TP VPN基础实验配置

一、概述 上次大概了解了L2TP的基本原理和使用场景&#xff0c;今天来模拟一个小实验&#xff0c;使用Ensp的网卡桥接到本地电脑试下L2TP拨号&#xff0c;今天主要使用标准的L2TP&#xff0c;其实在这个基础上可以加上IPSec进行加密&#xff0c;提高安全性。 网络拓扑 拓扑说明…