elementui中el-select和el-tree实现下拉树形多选功能

news2025/1/22 15:50:40

实现效果如下:
在这里插入图片描述
代码如下:
html中

   <el-col :lg="12">
                          <el-form-item label="可用单位" prop="useOrgListTemp">
                            <div class="departAll">
                            <el-select
                              ref="selectTree"
                              v-model="valueName"
                              :value="valueMultiple"
                              multiple
                              clearable
                              @remove-tag="changeValue"
                              @clear="clearHandle"
                              placeholder="请选择可用单位"
                            >
                              <div
                                style="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-checkbox
                                  ref="tree"
                                  node-key="id"
                                  id="tree-option"
                                  default-expand-all
                                  :props="defaultProps"
                                  @check-change="handleNodeClick"
                                >
                                  <span
                                    class="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",
            },
          ],
        },
        {
          id: 4,
          name: "一级 4",
          children: [
            {
              id: 10,
              name: "二级 4-1",
            },
            {
              id: 11,
              name: "二级 4-2",
            },
          ],
        },
        {
          id: 5,
          name: "一级 5",
          children: [
            {
              id: 12,
              name: "二级 5-1",
            },
            {
              id: 13,
              name: "二级 5-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=true
          this.data.forEach((item, index) => {
            this.choosedValue.push(item.id)
          });
        this.choosedValue=[...new Set(this.choosedValue)]
        this.$refs.tree.setCheckedKeys(this.choosedValue);
     }else{
      this.mychecked=false
      this.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=false
        this.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=false
      this.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.coloradmin.cn/o/1102211.html

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

相关文章

BUUCTF题解之[极客大挑战 2019]Havefun 1

1.题目分析 使用浏览器开发者工具查看网页源码&#xff0c;查看疑似flag的代码。 &#xff08;特别是注释了的源码&#xff0c;一般是HTML,JS,PHP的源码&#xff09; 修改统一资源定位符URL访问服务器后端接口&#xff0c;拿到flag。 1.URL URL是统一资源定位符&#xff08;…

“torch.load“中出现的“Unexpected key(s) in state_dict“报错问题

问题&#xff1a; 解决&#xff1a; 添加strictFalse&#xff0c;允许加载过程中出现不匹配的键。但请注意,仍然需要确保模型中的主要参数能够正确加载&#xff0c;以确保模型的有效性。 model.load_state_dict(state_dict) # 改为&#xff1a; model.load_state_dict(state…

接口自动化测试之HttpRunner测试框架

引言 接口自动化测试的实现方案有很多&#xff0c;没有编程基础的可以使用 PostmanNewman 或 JmeterAnt 来实现&#xff0c;有编程基础的则可以结合自动化测试框架来实现。基于Python的测试框架有&#xff1a;Unittest、HttpRunner、Robot Framework、Pytest等&#xff0c;本文…

跨境电商系统商城源码定制开发的优势与需求

随着互联网的快速发展&#xff0c;跨境电商成为了全球贸易的重要方式之一。为了满足不同企业的需求&#xff0c;跨境电商系统商城源码定制开发应运而生。这种定制开发的方式可以帮助企业打造适合自己的电商系统&#xff0c;提供个性化的功能和服务&#xff0c;迎合不断变化的市…

报错解决——AttributeError: ‘OpenpyxlWriter‘ object has no attribute ‘save‘

完整报错 Traceback (most recent call last):File "track_half.py", line 249, in <module>main(opt,File "track_half.py", line 153, in mainEvaluator.save_summary(summary, os.path.join(result_root, summary_{}.xlsx.format(exp_name)))Fil…

生产管理电子看板在制造业中的成功案例分享

生产管理电子看板是一种重要的生产现场管理工具&#xff0c;在制造业中已经取得了许多成功的应用案例。它通过实时采集生产现场的数据&#xff0c;包括设备状态、生产进度、产品质量等信息&#xff0c;并将这些信息以图表、数字等形式显示出来&#xff0c;同时还可以通过声音、…

Python武器库开发-基础篇(一)

前言 以Python编程为主&#xff0c;围绕渗透测试展开的一门专栏。专栏内容包括&#xff1a; Python基础编程&#xff08;Python基础、语法、对象、文件操作&#xff0c;错误和异常&#xff09;&#xff0c;Python高级编程&#xff08;正则表达式、网络编程、WEB编程&#xff0…

如何选择国产压力测试工具?

随着互联网的飞速发展&#xff0c;软件应用的性能和稳定性变得愈发重要。无论是在线购物网站、社交媒体平台还是移动应用程序&#xff0c;用户都期望能够快速、流畅地访问和使用它们。为了确保应用程序在高负载下仍能够正常运行&#xff0c;压力测试工具变得至关重要。在国内&a…

13.56M刷卡芯片522/523智能门锁超低功耗读卡方案

传统的机械锁具已走过了近百年历史&#xff0c;其功能及性能几乎已诠释到了极致。但仍不能满足现代人们对锁具有高可靠性、高安全性、信息化、智能化的要求&#xff0c;自50年代末&#xff0c;半导体技术问世后&#xff0c;人们便将该技术应用于锁具上&#xff0c;衍生出了形形…

华为云云耀云服务器L实例评测|在云耀云服务器L实例上无人直播,增加睡后收入

购买云耀云服务器 L 实例 华为云耀云服务器 L 实例是一款轻量级云服务器&#xff0c;开通选择实例即可立刻使用&#xff0c;不需要用户再对服务器进行基础配置。新用户还有专享优惠&#xff0c;2 核心 2G 内存 3M 带宽的服务器只要 89 元/年&#xff0c;可以点击华为云云耀云服…

常见的数据结构及应用

文章目录 前言数据结构介绍数组链表队列和栈树堆 总结 前言 数据结构是计算机存储、组织数据的方式。在工作中&#xff0c;我们通常会直接使用已经封装好的集合API&#xff0c;这样可以更高效地完成任务。但是作为一名程序员&#xff0c;掌握数据结构是非常重要的&#xff0c;…

【EI会议征稿】2024年第四届人工智能、自动化与高性能计算国际会议(AIAHPC 2024)

2024年第四届人工智能、自动化与高性能计算国际会议&#xff08;AIAHPC 2024&#xff09; 2024 4th International Conference on Artificial Intelligence, Automation and High Performance Computing 2024第四届人工智能、自动化与高性能计算国际会议(AIAHPC 2024)将于202…

搭建伪分布式Hadoop

文章目录 一、Hadoop部署模式&#xff08;一&#xff09;独立模式&#xff08;二&#xff09;伪分布式模式&#xff08;三&#xff09;完全分布式模式 二、搭建伪分布式Hadoop&#xff08;一&#xff09;登录虚拟机&#xff08;二&#xff09;上传安装包&#xff08;三&#xf…

通过 Splashtop Enterprise 实现更高的效率

远程工作的出现不仅重塑了我们的传统工作模式&#xff0c;而且还使远程访问和支持解决方案在确保运营连续性和效率方面的关键作用浮出水面。 Splashtop Enterprise 已帮助企业实现远程工作和 IT 远程支持的无缝远程访问&#xff0c;并已被证明是许多组织不可或缺的工具。 在本…

综合电商商城小程序的作用是什么

综合电商顾名思义就是什么商品都卖&#xff0c;涵盖的品牌、种类、数量非常庞大&#xff0c;线下门店规模也相当可以&#xff0c;在同城场景中有较高的需求度。 然而在实际经营中&#xff0c;综合商品经营商家还是会面临一些痛点。 通过【雨科】平台搭建综合电商商城小程序全面…

NProgress进度条的使用

1 下载nprogress npm install --save nprogress 2.然后在 router/index.js里写上以下几行代码 import NProgress from "nprogress"; // 导入 nprogress模块import "nprogress/nprogress.css"; // 导入样式&#xff0c;否则看不到效果NProgress.configure(…

如何规避企业内文件流转泄密风险?

由于企业内部业务流程复杂&#xff0c;研发、生产、销售等跨部门的不同人员有时需要交互数据&#xff0c;而不同的文件涉密程度不同&#xff0c;需要由不同涉密等级的人员进行处理。 为保障核心资料的安全&#xff0c;文件阅读权限管控系统为用户提供了灵活的内部文件流转功能&…

CleanMyMac X4.14.3中文版:时尚元素与高效清理的完美结合!

嗨&#xff01;小仙女们~&#x1f338;今天小编给大家介绍一款超级时尚的Mac清理神器——CleanMyMac X4.14.3中文版&#xff01; 想要让你的电脑焕然一新&#xff0c;提升操作速度&#xff0c;还能拥有时尚元素的体验&#xff0c;那就赶紧来看看吧&#xff01; CleanMyMac X 2…

重生奇迹mu获取宠物的方法

现在很多游戏都有宠物&#xff0c;因为宠物的加入让游戏更加有趣&#xff0c;玩家可以带着宠物玩游戏&#xff0c;宠物还可以做出呆萌的鬼脸&#xff0c;让玩家感受到游戏的魅力&#xff0c;重生奇迹MU游戏也是有各种宠物。 在重生奇迹MU之中有各种宠物&#xff0c;这些宠物非…

CatBoost算法模型实现贷款违约预测

前言 此篇文章为整个Boost(提升方法)集成算法模型的终章&#xff0c;前几篇文章依次结合详细项目案例讲解了AdaBoost、GBDT、XGBoost、LighGBM共四个常用的集成算法模型&#xff0c;每一篇文章都包含实战项目以及可运行代码。仅通过看一遍文章不去实践是很难掌握集成算法模型的…