vue-treeselect 的基本使用

vue-treeselect 的基本使用

  • 1. 效果展示
  • 2. 安装 插件
  • 3. 引入组件
  • 4. 代码

1. 效果展示

请添加图片描述

2. 安装 插件

vue-treeselect是一个树形的下拉菜单,至于到底有多少节点那就要看你的数据源有多少层了,挺方便的。下面这个这个不用多说吧,下载依赖

npm install --save @riophae/vue-treeselect

3. 引入组件

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

4. 代码

<treeselect :value="deptIds" :options="deptOptions" :show-count="true" :multiple="true" @select="handleSelect"  @deselect="handleDeselect" placeholder="请选择归属部门" />deptIds: []// 选中的数据
handleSelect(selectedNodes) {this.deptIds.push(selectedNodes.id);
},
// 取消后的数据
handleDeselect(selectedNodes) {let id = selectedNodes.id;let idx = this.deptIds.findIndex(it=> it == id)this.deptIds.splice(idx,1)
},

deptOptions 格式为:
在这里插入图片描述

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

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

相关文章

基本模拟概念

目标&#xff1a; 讨论模拟电子技术的基本特性 描述模拟信号 分析信号源 解释放大器的特性 1.1模拟电子学 电子学可以划分成很多的分类来研究。其中最基本的一种分类方式是将信号分成可由 二进制数字表示的数字信号和由连续变化量表示的模拟信号。数字电子学包括所有的算术 和…

MAC安装CocoaPods遇到的错误Failed to build gem native extension.

MAC安装CocoaPods遇到的错误Failed to build gem native extension. 配置flutter环境的时候报错cocoapods不可用 发现已经安装了CocoaPods&#xff0c;但是不能用 重新安装CocaPods sudo gem install cocoapods重新安装报错如下&#xff1a; 安装RVM curl -L https://get.r…

第十一章数据仓库和商务智能10分

【数据仓库-后端&#xff0c;商务智能-前端】 基本算法&#xff1a;关联关系&#xff08;牵手-谈恋爱&#xff09;&#xff0c;集群关系&#xff08;杭州人爱吃酸甜口&#xff09;&#xff0c;决策树&#xff0c;线性回归&#xff0c;贝叶斯&#xff0c;神经网络&#xff0c;时…

为什么说日本茶道源于中国茶文化

茶&#xff0c;始于药&#xff0c;而后为饮茶&#xff0c;始于药&#xff0c;而后为饮。在8世纪的中国&#xff0c;茶就作为一桩雅事而进入一个诗意王国。而日本则在15世纪将其尊崇为一种美的宗教——茶道。 茶道&#xff0c;是在日常染污之间&#xff0c;因由对美的倾慕而建立…

redis五种类型介绍

Redis是一种内存数据存储系统&#xff0c;它支持五种不同的数据类型&#xff1a; 1. String String是Redis中最基本的数据类型&#xff0c;它可以存储任何形式的字符串数据&#xff0c;例如普通的文本字符串&#xff0c;二进制数据或JSON格式的数据。除此之外&#xff0c;还可以…

快手本地生活服务商入驻方法来了!超简单

本地生活市场正如一座蕴藏丰富的金矿&#xff0c;亟待我们去挖掘其潜在的价值。在2023年这个消费市场全面回暖的年份&#xff0c;服务零售行业的增速犹如一匹黑马&#xff0c;远远超过了商品零售。据权威数据显示&#xff0c;服务零售额的增长幅度高达20%&#xff0c;比商品消费…

前端开发框架BootStrap

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl BootStrap概述 Bootstrap是一个开源的前端框架&#xff0c;它由Twitter的设计师和开发者创建并维护。Bootstrap提供了许多现成的Web组件&#xff0c;可帮助开发者快速设计和…

Spring (四) 之配置及配置文件的操作

文章目录 1、Spring 基于注解的配置基于注解的配置引入依赖包配置实体类数据访问层业务层业务层实现测试 2、Bean和Component和Configuration的区别1 Bean:2 Component:3 Configuration:总结&#xff1a; 区别Component和Configuration区别 3、Spring读取properties配置文件准备…

第一届AI Agent智能体现场开发大赛报名开启!8月上旬火热开赛~

由联想拯救者、AIGC开放社区、英特尔携手主办的“AI生成未来第二届拯救者杯OPENAIGC开发者大赛”已经正式启动&#xff0c;“2024 AI Agent极限挑战赛”作为特设专项赛道&#xff0c;也将同步于8月上旬开赛&#xff0c;参赛者将在更加紧张刺激的现场比赛中展现其技术与创造力。…

抖音小店新店铺起飞式玩法,这几步一定要做好,前期很重要

大家好&#xff0c;我是电商笨笨熊 进入抖音小店后不知道该怎么操作&#xff0c;不清楚如何让新店快速起店&#xff1b; 今天我们就来聊聊新店铺快速起店的几个关键步骤&#xff0c;新手玩家一定要按照流程去做。 第一步&#xff1a;店铺搭建 小店开通之后不要着急选品上架&…

MGRE环境下的ospf实验

MGRE环境下的ospf实验 一.拓扑图 二.实验步骤 1.分配各路由网段IP [R1]int g 0/0/0 [R1-GigabitEthernet0/0/0]ip address 16.0.0.1 24 [R1-GigabitEthernet0/0/0]int g 0/0/1 [R1-GigabitEthernet0/0/1]ip address 116.0.0.1 24[R2]int g 0/0/0 [R2-GigabitEthernet0/0/0]…

Docker+Uwsgi部署Django项目

在之前的文章中&#xff0c;已经给大家分享了在docker中使用django自带的命令部署项目&#xff0c;这篇文章主要讲解如何使用uwsgi部署。 1. 在Django项目的根目录下新建Dockerfile文件 #Dockerfile文件 # 使用 Python 3.9 作为基础镜像 FROM python:3.9# 设置工作目录 WORKDI…

随机游走的艺术-图嵌入表示学习

图嵌入引入 机器学习算法&#xff1a; 厨师 样本集&#xff1a; 食材 只有好的食材才能做出好的饭菜 我们需要把数据变成计算机能够读懂的形式&#xff08;将数据映射成为向量&#xff09; 图嵌入概述 传统图机器学习 图表示学习 自动学习特征&#xff0c;将…

初学python记录:力扣924. 尽量减少恶意软件的传播

题目&#xff1a; 给出了一个由 n 个节点组成的网络&#xff0c;用 n n 个邻接矩阵图 graph 表示。在节点网络中&#xff0c;当 graph[i][j] 1 时&#xff0c;表示节点 i 能够直接连接到另一个节点 j。 一些节点 initial 最初被恶意软件感染。只要两个节点直接连接&#x…

提升测试效率都有哪些具体手段?

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

uncloud的查询数据库的条件要和shema中写的一致,不然会报错

为什么uni-app中的database中的有些文件在hbuilder中可以看到&#xff0c;在vscode中看不到&#xff1f; uni-starter微信登录后查数据库db.collection后会提示没有权限 貌似非管理员都不能访问 uni-starter微信登录后查数据库db.collection(opendb-poi).aggregate()后会提示…

计算机网络(六)应用层

应用层 基本概念 服务器端&#xff08;Server&#xff09;&#xff1a; 服务器是网络中提供服务的计算机或软件程序。服务器通常具有更高的性能、更大的存储空间和更高的带宽&#xff0c;用于提供各种服务&#xff0c;如文件存储、数据库管理、Web托管、电子邮件传递等。服务…

共享桌面,3分钟自己实现一个吧,还能听见麦克风声音哦

前言 关于【SSD系列】&#xff1a; 前端一些有意思的内容&#xff0c;旨在3-10分钟里&#xff0c; 500-1000字&#xff0c;有所获&#xff0c;又不为所累。 共享桌面程序&#xff0c;哇&#xff0c;高大尚耶&#xff01;其实不然&#xff0c;让我带你3分钟实现桌面共享程序&am…

LD3320语音模块开发以及未来拿到其他模块的开发方式

当我们拿到一块模块进行开发的时候&#xff0c;一定要拿到配套的使用手册&#xff0c;不然在短时间内根本下不了手 一、使用source Insight来阅读源码 1.建立文件夹 2. 在source Insight放入该文件 3.添加源码 4.解决Source Insight乱码的问题 5.让各个代码模块之间有关联 二、…

uni-app中页面生命周期与vue生命周期的执行顺序对比

应用生命周期 uni-app 支持如下应用生命周期函数&#xff1a; 函数名说明平台兼容onLaunch当uni-app 初始化完成时触发&#xff08;全局只触发一次&#xff09;&#xff0c;参数为应用启动参数&#xff0c;同 uni.getLaunchOptionsSync 的返回值onShow当 uni-app 启动&#x…