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…

netlink_kernel_create

netlink_kernel_create 是 Linux 内核中的一个函数&#xff0c;主要用于创建 Netlink 套接字&#xff0c;以便于内核与用户空间的通信。 该函数的原型如下&#xff1a; static inline struct sock *netlink_kernel_create(struct net *net, int unit, unsigned int groups, voi…

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

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

力扣第18题. 四数之和

题目&#xff1a; 给定一个包含 n 个整数的数组 nums 和一个目标值 target&#xff0c;判断 nums 中是否存在四个元素 a&#xff0c;b&#xff0c;c 和 d &#xff0c;使得 a b c d 的值与 target 相等&#xff1f;找出所有满足条件且不重复的四元组。 注意&#xff1a; …

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

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

redis五种类型介绍

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

【ARM Trace32(劳特巴赫) 使用介绍 15 -- 通过 nRESE从CPU第一条指令开始Debug】

请阅读【嵌入式开发学习必备专栏 】 文章目录 Trace32 NRESETNRESET 作用nRESET 使用介绍JTAG 特定引脚控制CPU第一条指令开始进行 debug注意事项Trace32 NRESET 在 TRACE32 系统中,nRESET 是一个非常重要的概念,它直接关联到目标系统(通常是一个微处理器或微控制器)的硬件…

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

本地生活市场正如一座蕴藏丰富的金矿&#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;参赛者将在更加紧张刺激的现场比赛中展现其技术与创造力。…

Lua中文语言编程源码-第十节,更改ltm.c 元格操作函数, 使Lua加载中文库关键词(执行诸如__索引,__新索引,__加等元表操作)

源码已经更新在CSDN的码库里&#xff1a; git clone https://gitcode.com/funsion/CLua.git 在src文件夹下的ltm.c 表格操作函数&#xff0c;此模块是C语言编写的&#xff0c;是Lua语言中的一个库文件&#xff0c;主要用来提供元表操作的功能。 该库提供了许多函数&#xff…

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

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

OpenAI 选择东京作为其首个亚洲办事处

新办事处旨在促进与日本政府、当地企业和研究机构的合作&#xff0c;开发适合日本独特需求的人工智能工具。 之所以选择东京作为OpenAI在亚洲的第一家企业&#xff0c;是因为这里拥有全球领先的技术、致力于服务的文化和创新的社区。 "OpenAI 首席执行官 Sam Altman 解释…

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…

static辨析

静态变量 局部全局非静态局部作用域&#xff0c;只在函数执行期间存在全局作用域&#xff0c;作用域为所有的源文件&#xff0c;但是在其他不包含全局变量定义的源文件中需要用extern关键字再次声明静态局部作用域&#xff0c;只被初始化一次&#xff0c;自从第一次被初始化直…

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

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

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

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