element-ui 实现输入框下拉树组件(2024-05-23)

用element-ui的 el-input,el-tree,el-popover组件组合封装

@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script><div id="app"><el-popoverplacement="bottom"width="350"trigger="click"><el-treestyle="width:300px"ref="tree":data="options":check-strictly="false"show-checkboxnode-key="id":default-expanded-keys="[]":default-checked-keys="[]":props="{children: 'children',label: 'name'}"@check-change="handleCheckChage"@node-click="handleNodeClick"></el-tree><el-input slot="reference" style="width:380px"v-model="value.name" placeholder="节点" clearable @clear="handleIptClear"></el-input></el-popover>
</div>
var Main = {data() {return {options: [{id:'1', name: '1',children:[{id:'11', name: '11'},{id:'12', name: '12'}]},{id:'2', name: '2'}],value:{id:'', name: ''}}},methods: {// 清空输入框内容handleIptClear(){this.$refs.tree.setCheckedNodes([])this.value.id = ''this.value.name = ''},// checkbox被选中或取消选中handleCheckChage(arg1, arg2, arg3){const seltedNodes = this.$refs.tree.getCheckedNodes()const ids = seltedNodes.map(n => n.id)const names = seltedNodes.map(n => n.name)this.value.id = idsthis.value.name = names},// 节点被点击handleNodeClick(arg1, arg2, arg3){console.log('nodes:', arg1, arg2, arg3)},}};var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

可以根据函数方法拿到里面的参数,实现多选节点效果

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

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

相关文章

枣庄高防服务器如何实现全球覆盖?

利用 枣庄高防服务器如何实现全球覆盖&#xff1f; 嗨&#xff0c;亲爱的读者们&#xff01;今天我们将带你探索如何利用枣庄高防服务器实现全球覆盖&#xff0c;让你的网站在世界各地都能稳定快速地访问。而我们这次推荐的服务器商是莱卡云&#xff08;Lcayun&#xff09;&am…

C数据结构:二叉树

目录 二叉树的数据结构 前序遍历 中序遍历 后序遍历 二叉树的创建 二叉树的销毁 二叉树的节点个数 二叉树叶子节点个数 二叉树第K层节点个数 二叉树的查找 层序遍历 判断二叉树是否为完全二叉树 完整代码 二叉树的数据结构 typedef char BTDataType; typedef str…

使用numpy手写一个神经网络

本文主要包含以下内容&#xff1a; 推导神经网络的误差反向传播过程使用numpy编写简单的神经网络&#xff0c;并使用iris数据集和california_housing数据集分别进行分类和回归任务&#xff0c;最终将训练过程可视化。 1. BP算法的推导过程 1.1 导入 前向传播和反向传播的总体…

Three.js——相机

在Three.js中&#xff0c;相机&#xff08;Camera&#xff09;是用于定义视图和渲染场景的一个关键组件。相机决定了你从哪个角度和位置观察场景中的物体&#xff0c;以及如何呈现这些物体。Three.js 提供了几种不同类型的相机&#xff0c;每种相机都有其特定的用途和特性。以下…

Unity OutLine 模型外描边效果

效果展示&#xff1a; 下载链接

【Rust日报】ratatui版本更新

[new ver] ratatui v0.26.3 一个构建终端用户界面的库。新版本包括&#xff1a; 修复Unicode 截断 bug对颜色更好地序列化更快的渲染弃用assert_buffer_eq宏暴露错误类型常量函数和类型 官网: https://ratatui.rs/ 链接: https://ratatui.rs/highlights/v0263/ [new lib] ansi2…

618电商选品爆款攻略,谁掌握谁爆单

618电商节是各大电商平台和品牌商家的重要促销节点&#xff0c;选品和营销策略对于销售成绩至关重要。以下是一些选品和营销攻略的要点&#xff1a; 一、市场分析与目标定位 1、分析当前经营类目市场的流行趋势、热门品类以及消费者需求的变化。 目前市场上商品繁多&#xf…

Java 命令执行某一个特定类

在Java中&#xff0c;要执行一个特定的类&#xff08;通常是包含main方法的类&#xff09;&#xff0c;你需要使用java命令&#xff0c;并指定类的完全限定名&#xff08;包括包名&#xff09;。通常&#xff0c;这还需要你设置正确的类路径&#xff08;classpath&#xff09;&…

Apache Cassandra和Java:介绍如何在Java中连接和使用Apache Cassandra这款数据库

1. Apache Cassandra简介 Apache Cassandra是一个开源的分布式NoSQL数据库系统,最初由Facebook开发,用来处理大量的结构化数据 across many commodity servers. Cassandra在高可用性和无单点故障的同时,提供了出色的数据分布策略。 Apache Cassandra的主要特点: 分布式…

超详细避坑指南!OrangpiAIPro转换部署模型全流程!

目录 OrangepiPro初体验 前述&#xff1a; 一、硬件准备 二、安装CANN工具链&#xff08;虚拟机&#xff09; 三、配置模型转换环境&#xff08;虚拟机&#xff09; 1.安装miniconda 。 2.创建环境。 3.安装依赖包 四、转换模型 1. 查看设备号&#xff08;开发板&…

一步一脚印:轻松掌握服务器硬件的奥秘

在这个信息化飞速发展的时代&#xff0c;无论是企业还是个人&#xff0c;对数据处理和存储的需求日益增长。服务器&#xff0c;作为互联网的基石&#xff0c;其重要性不言而喻。但对于大多数人来说&#xff0c;服务器的内部世界似乎既复杂又遥远。不过&#xff0c;不用担心&…

在Anaconda中修改查找和安装软件包的存储库的来源channels

以下是一些关键的步骤和命令&#xff0c;用于修改Anaconda的channels&#xff1a; 查看当前channels 使用命令 conda config --show channels 可以查看当前配置的channels。 添加新的channel 使用命令 conda config --add channels <channel_url> 来添加一个新的channel…

TIM定时器PWM输出

tim.c #include "tim.h" #include "stm32mp1xx_tim.h" #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h"//tim4初始化(蜂鸣器) void tim4_init(){//1.使能GPIOB的外设时钟RCC->MP_AHB4ENSETR | (0x1<<1);//使能TI…

办公必备!一键拆分文件,效率翻倍的秘密

需求介绍 1、我有一张数据表“测试数据.xlsx” 2、我要根据A1“COUNTY_CODE”分类拆分成几张数据表&#xff08;这里从9657到9658共12类&#xff0c;就是拆分成12张数据表&#xff09; 3、根据12个分类&#xff0c;发送数据邮件给对应的收件人 4、收件人及抄送人、共同抄送人…

Appium系列(2)元素定位工具appium-inspector

背景 如实现移动端自动化&#xff0c;依赖任何工具时&#xff0c;都需要针对于页面中的元素进行识别&#xff0c;通过识别到指定的元素&#xff0c;对元素进行事件操作。 识别元素的工具为appium官网提供的appium-inspector。 appium-inspector下载地址 我这里是mac电脑需要下…

基于Cloudflare/CloudDNS/GitHub使用免费域名部署NewBing的AI服务

部署前准备&#xff1a; Cloudflare 账号 https://dash.cloudflare.com/login CloudDNS 账号 https://www.cloudns.net/ GitHub 账号 https://github.com/Harry-zklcdc/go-proxy-bingai Cloudflare 部署 Worker CloudDNS 获取免费二级域名 GitHub New Bing Ai 项目 https://git…

揭秘黄金分割数列:斐波那契数列的奇妙之旅

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、黄金分割数列——斐波那契数列的简介 二、实现斐波那契数列的函数 三、斐波那契数列在…

前端开发之xlsx的使用和实例,并导出多个sheet

前端开发之xlsx的使用和实例 前言效果图1、安装2、在页面中引用3、封装工具类&#xff08;excel.js&#xff09;4、在vue中使用 前言 在实现业务功能中导出是必不可少的功能&#xff0c;接下来为大家演示在导出xlsx的时候的操作 效果图 1、安装 npm install xlsx -S npm inst…

Discuz!X3.4论坛网站公安备案号怎样放到网站底部?

Discuz&#xff01;网站的工信部备案号都知道在后台——全局——站点信息——网站备案信息代码填写&#xff0c;那公安备案号要添加在哪里呢&#xff1f;并没有看到公安备案号填写栏&#xff0c;今天驰网飞飞和你分享 1&#xff09;工信部备案号和公安备案号统一填写到网站备案…

数据预处理

数据预处理 引入一.配置java , hadoop , maven的window本机环境变量1.配置2.测试是否配置成功 二.创建一个Maven项目三.导入hadoop依赖四.数据清洗1.数据清洗的java代码2.查看数据清洗后的输出结果 引入 做数据预处理 需要具备的条件 : java,hadoop,maven环境以及idea软件 一…