vue: 使用下拉树组件@riophae/vue-treeselect

前言:  在vue中, 因为element-ui 2.X是没有tree-select组件的，到了element-plus就有了 @riophae/vue-treeselect是一个基于 Vue.js 的树形选择器组件，可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能，可以自定义选项的样式和模板。该组件易于使用和扩展，适用于各种类型的项目。

 1. 安装第三方包

npm i @riophae/vue-treeselect

2. 导入并注册

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'export default {components: { Treeselect } 
}

3. 基本使用

<template><div class="main"><div class="tree"><Treeselect v-model="value":options="options":placeholder="'请选择人员'":normalizer="tenantIdnormalizer":multiple="true"@input="treeSelectInput"@select="treeSelectChange"@deselect="treeSelectDeselect"@search-change="treeSelectSearch"@open="treeSelectOpen"@close="treeSelectClose"/></div></div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import treeData from './data/tree'
export default {data() {return {value: null,options: []}},components: { Treeselect },mounted(){// 延迟模拟请求数据setTimeout(() => {this.options = treeDatathis.value = [111, 113] // 测试回显操作}, 300)},methods:{// 选中触发（第一次回显的时候会触发，清除值的时候会触发, value值为undefined） input事件用于v-model双向绑定组件更新父组件值treeSelectInput(value, instanceId) {console.log(value, 'input事件')console.log(this.value, 'this.value -- input') // 这个不需要 延迟},// 选中触发（清除值的时候不会触发）treeSelectChange(raw, instanceId) {console.log(raw, '当前的对象')setTimeout(() => { // 如果用到this.value 需要setTimeout延迟一下拿到最新的值console.log(this.value, 'this.value -- select')})},// 移除选项时触发 当设置multiple为true时生效  raw为当前移除的对象treeSelectDeselect(raw, instanceId) {console.log(raw, 'deselect-->>')},// 搜索treeSelectSearch(searchQuery, instanceId) {console.log(searchQuery, '当前搜索的值')},// 展开触发treeSelectOpen(instanceId) {console.log('展开了')},// 关闭触发treeSelectClose(value, instanceId) {console.log(value, '当前的value值')},// 字段默认 id label 用于规范化数据源tenantIdnormalizer(node, instanceId) {if (node.children && !node.children.length) {delete node.children}return {id: node.id,label: node.title,children: node.children}}}
}
</script>
<style scoped>
.main {width: 100%;height: 100%;padding: 60px 0 0 200px;
}.main .tree {width: 240px;height: 40px;
}::v-deep .vue-treeselect__label {color: #606266;
}
</style>

4. 比较全面的属性配置参考

props: {/*** 即使有禁用的选定节点，是否允许重置值*/allowClearingDisabled: {type: Boolean,default: false,},/*** 选择/取消选择祖先节点时，是否应选择/取消选中其禁用的后代* 和 allowClearingDisabled 一起使用*/allowSelectingDisabledDescendants: {type: Boolean,default: false,},/*** 菜单是否应始终打开*/alwaysOpen: {type: Boolean,default: false,},/*** 是否将菜单加到body上*/appendToBody: {type: Boolean,default: false,},/*** 是否启用异步搜索模式*/async: {type: Boolean,default: false,},/*** 是否自动将组件集中在装载上？*/autoFocus: {type: Boolean,default: false,},/*** 装载时自动加载根选项。当设置为“false”时，打开菜单时将加载根选项。*/autoLoadRootOptions: {type: Boolean,default: true,},/*** 当用户取消选择一个节点时，会自动取消选择其祖先。仅适用于平面模式。*/autoDeselectAncestors: {type: Boolean,default: false,},/*** 当用户取消选择节点时，会自动取消选择其子节点。仅适用于平面模式。*/autoDeselectDescendants: {type: Boolean,default: false,},/*** 当用户选择一个节点时，会自动选择其祖先。仅适用于平面模式。*/autoSelectAncestors: {type: Boolean,default: false,},/*** 当用户选择一个节点时，会自动选择其子节点。仅适用于平面模式。*/autoSelectDescendants: {type: Boolean,default: false,},/*** 如果没有文本输入，按退格键是否删除最后一项。*/backspaceRemoves: {type: Boolean,default: true,},/*** 在清除所有输入字段之前进行处理的函数。* 返回“false”以防止清除值* @type {function(): (boolean|Promise<boolean>)}*/beforeClearAll: {type: Function,default: constant(true),},/*** 在叶节点之前显示分支节点？*/branchNodesFirst: {type: Boolean,default: false,},/*** 是否应该缓存每个搜索请求的结果？*/cacheOptions: {type: Boolean,default: true,},/*** 是否显示重置值的“×”按钮？*/clearable: {type: Boolean,default: true,},/*** 清楚文本，multiple为true时*/clearAllText: {type: String,default: 'Clear all',},/*** 选择后是否清除搜索输入。* 仅当“multiple”为“true”时使用。* 对于单选模式，无论道具值如何，它总是**在选择一个选项后清除输入。*/clearOnSelect: {type: Boolean,default: false,},/*** “×”按钮的标题。*/clearValueText: {type: String,default: 'Clear value',},/*** 选择选项后是否关闭菜单？* 仅当“multiple”为“true”时使用。*/closeOnSelect: {type: Boolean,default: true,},/*** 加载时应自动展开多少级别的分支节点。* 设置Infinity以使所有分支节点在默认情况下展开。*/defaultExpandLevel: {type: Number,default: 0,},/*** 在用户开始搜索之前要显示的默认选项集。用于异步搜索模式。* 当设置为“true”时，将自动加载作为空字符串的搜索查询结果。* @type {boolean|node[]}*/defaultOptions: {default: false,},/*** 如果没有文本输入，按delete键是否删除最后一项。*/deleteRemoves: {type: Boolean,default: true,},/*** 用于连接隐藏字段值的多个值的分隔符。*/delimiter: {type: String,default: ',',},/*** 仅显示与搜索值直接匹配的节点，不包括其祖先。** @type {Object}*/flattenSearchResults: {type: Boolean,default: false,},/*** 是否阻止选择分支节点？*/disableBranchNodes: {type: Boolean,default: false,},/*** 禁用控制？*/disabled: {type: Boolean,default: false,},/*** 是否禁用模糊匹配功能？*/disableFuzzyMatching: {type: Boolean,default: false,},/***是否启用平面模式。非平面模式（默认）是指： *   - 每当检查分支节点时，它的所有子节点也将被检查*   - 每当一个分支节点检查了所有子节点时，该分支节点本身也会被检查* 设置“true”以禁用此机制*/flat: {type: Boolean,default: false,},/*** 将以所有事件作为最后一个参数进行传递。* 有助于识别事件的起源。*/instanceId: {// Add two trailing "$" to distinguish from explictly specified ids.default: () => `${instanceId++}$$`,type: [String, Number],},/*** Joins multiple values into a single form field with the `delimiter` (legacy mode).* 使用“分隔符”将多个值合并到一个表单字段中（传统模式）。*/joinValues: {type: Boolean,default: false,},/*** 限制所选选项的显示。* 其余部分将隐藏在limitText字符串中。*/limit: {type: Number,default: Infinity,},/*** Function that processes the message shown when selected elements pass the defined limit.* @type {function(number): string}*/limitText: {type: Function,default: function limitTextDefault(count) { // eslint-disable-line func-name-matchingreturn `and ${count} more`},},/*** Text displayed when loading options.*/loadingText: {type: String,default: 'Loading...',},/*** Used for dynamically loading options.* @type {function({action: string, callback: (function((Error|string)=): void), parentNode: node=, instanceId}): void}*/loadOptions: {type: Function,},/*** Which node properties to filter on.*/matchKeys: {type: Array,default: constant(['label']),},/*** Sets `maxHeight` style value of the menu.*/maxHeight: {type: Number,default: 300,},/*** Set `true` to allow selecting multiple options (a.k.a., multi-select mode).*/multiple: {type: Boolean,default: false,},/*** Generates a hidden <input /> tag with this field name for html forms.*/name: {type: String,},/*** Text displayed when a branch node has no children.*/noChildrenText: {type: String,default: 'No sub-options.',},/*** Text displayed when there are no available options.*/noOptionsText: {type: String,default: 'No options available.',},/*** Text displayed when there are no matching search results.*/noResultsText: {type: String,default: 'No results found...',},/*** Used for normalizing source data.* @type {function(node, instanceId): node}*/normalizer: {type: Function,default: identity,},/*** By default (`auto`), the menu will open below the control. If there is not* enough space, vue-treeselect will automatically flip the menu.* You can use one of other four options to force the menu to be always opened* to specified direction.* Acceptable values:*   - `"auto"`*   - `"below"`*   - `"bottom"`*   - `"above"`*   - `"top"`*/openDirection: {type: String,default: 'auto',validator(value) {const acceptableValues = ['auto', 'top', 'bottom', 'above', 'below']return includes(acceptableValues, value)},},/*** Whether to automatically open the menu when the control is clicked.*/openOnClick: {type: Boolean,default: true,},/*** Whether to automatically open the menu when the control is focused.*/openOnFocus: {type: Boolean,default: false,},/*** Array of available options.* @type {node[]}*/options: {type: Array,},/*** Field placeholder, displayed when there's no value.*/placeholder: {type: String,default: 'Select...',},/*** Applies HTML5 required attribute when needed.*/required: {type: Boolean,default: false,},/*** Text displayed asking user whether to retry loading children options.*/retryText: {type: String,default: 'Retry?',},/*** Title for the retry button.*/retryTitle: {type: String,default: 'Click to retry',},/*** Enable searching feature?*/searchable: {type: Boolean,default: true,},/*** Search in ancestor nodes too.*/searchNested: {type: Boolean,default: false,},/*** Text tip to prompt for async search.*/searchPromptText: {type: String,default: 'Type to search...',},/*** Whether to show a children count next to the label of each branch node.*/showCount: {type: Boolean,default: false,},/*** Used in conjunction with `showCount` to specify which type of count number should be displayed.* Acceptable values:*   - "ALL_CHILDREN"*   - "ALL_DESCENDANTS"*   - "LEAF_CHILDREN"*   - "LEAF_DESCENDANTS"*/showCountOf: {type: String,default: ALL_CHILDREN,validator(value) {const acceptableValues = [ALL_CHILDREN, ALL_DESCENDANTS, LEAF_CHILDREN, LEAF_DESCENDANTS]return includes(acceptableValues, value)},},/*** Whether to show children count when searching.* Fallbacks to the value of `showCount` when not specified.* @type {boolean}*/showCountOnSearch: null,/*** In which order the selected options should be displayed in trigger & sorted in `value` array.* Used for multi-select mode only.* Acceptable values:*   - "ORDER_SELECTED"*   - "LEVEL"*   - "INDEX"*/sortValueBy: {type: String,default: ORDER_SELECTED,validator(value) {const acceptableValues = [ORDER_SELECTED, LEVEL, INDEX]return includes(acceptableValues, value)},},/*** Tab index of the control.*/tabIndex: {type: Number,default: 0,},/*** The value of the control.* Should be `id` or `node` object for single-select mode, or an array of `id` or `node` object for multi-select mode.* Its format depends on the `valueFormat` prop.* For most cases, just use `v-model` instead.* @type {?Array}*/value: null,/*** Which kind of nodes should be included in the `value` array in multi-select mode.* Acceptable values:*   - "ALL" - Any node that is checked will be included in the `value` array*   - "BRANCH_PRIORITY" (default) - If a branch node is checked, all its descendants will be excluded in the `value` array*   - "LEAF_PRIORITY" - If a branch node is checked, this node itself and its branch descendants will be excluded from the `value` array but its leaf descendants will be included*   - "ALL_WITH_INDETERMINATE" - Any node that is checked will be included in the `value` array, plus indeterminate nodes*/valueConsistsOf: {type: String,default: BRANCH_PRIORITY,validator(value) {const acceptableValues = [ALL, BRANCH_PRIORITY, LEAF_PRIORITY, ALL_WITH_INDETERMINATE]return includes(acceptableValues, value)},},/*** Format of `value` prop.* Note that, when set to `"object"`, only `id` & `label` properties are required in each `node` object in `value` prop.* Acceptable values:*   - "id"*   - "object"*/valueFormat: {type: String,default: 'id',},/*** z-index of the menu.*/zIndex: {type: [Number, String],default: 999,}
}

5. 插件的的方法配置

@input // // 选中触发（第一次回显的时候会触发，清除值的时候会触发, value值为undefined） input事件用于v-model双向绑定组件更新父组件值@select // 选中触发（清除值的时候不会触发）@deselect // 移除选项时触发 当设置multiple为true时生效  raw为当前移除的对象@search-change // 搜索触发（输入框输入 值改变时）@open // 展开时触发@close // 关闭时触发

6. 最终的效果

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

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

相关文章

php版 短信跳转微信小程序

php版 短信跳转微信小程序

实现这功能首先&#xff0c;小程序端添加业务域名 php代码 <?php declare (strict_types1);namespace app\controller\Admin;use app\model\Set; use app\Request;class Admin_Url_Scheme {public function getScheme(Request $request) {$appid 小程序appid;$secret 小…
阅读更多...
嵌入式基础-电路

嵌入式基础-电路

目录 1、电流 1.1电流方向 1.2交流电和直流电 2、电压 3、电阻 4、欧姆定律 1、电流 电流是指单位时间内通过导体的电荷量&#xff0c;用符号I表示&#xff0c;单位是安培&#xff08;A&#xff09;。电流是电磁学中的基本量纲之一&#xff0c;是七个基本量纲之一。电流的…
阅读更多...
深度学习入门教学——卷积神经网络CNN

深度学习入门教学——卷积神经网络CNN

一、CNN简介 1、应用领域 检测任务 分类与检索 超分辨率重构 2、卷积网络与传统网咯的区别 传统神经网络和卷积神经网络都是用来提取特征的。神经网络&#xff1a; 可以将其看作是一个二维的。卷积神经网络&#xff1a; 可以将其看作是一个三维的。 3、整体框架 二、输入层 …
阅读更多...
C++多态案例2----制作饮品

C++多态案例2----制作饮品

#include<iostream> using namespace std;//制作饮品的大致流程都为&#xff1a; //煮水-----冲泡-----倒入杯中----加入辅料//本案例利用多态技术&#xff0c;提供抽象类制作饮品基类&#xff0c;提供子类制作茶叶和咖啡class AbstractDrinking {public://煮水//冲水//倒…
阅读更多...
js摄像头动态检测

js摄像头动态检测

利用摄像头每一秒截图一次图像。然后计算2次图像之间的相似度。 如果相似度低于98%就会报警。 var video document.getElementsByClassName(inputvideo)[0]; video.innerHTML "<video classinput_video idcamera autoplay width640px height380px></video>…
阅读更多...
自动驾驶——估计预瞄轨迹YawRate

自动驾驶——估计预瞄轨迹YawRate

1.Introduction 在ADAS控制系统中&#xff0c;通常根据预瞄距离x去估计横向距离y&#xff0c;有如下关系&#xff1a; y a0 a1 x a2 * x^2 a3 * x^3 &#xff0c;那么现在有个需求&#xff0c;希望根据上述x和y的关系&#xff0c;去估计规划预瞄轨迹yawRate 2.How to es…
阅读更多...
【Linux】Qt Remote之Remote开发环境搭建填坑小记

【Linux】Qt Remote之Remote开发环境搭建填坑小记

总体思路 基于WSL2&#xff08;Ubuntu 22.04 LTS&#xff09;原子Alpha开发板进行Qt开发实验&#xff0c;基于Win11通过vscode remote到WSL2&#xff0c;再基于WSL2通过Qt 交叉编译&#xff0c;并通过sshrsync远程到开发板&#xff0c;构建起开发工具链。 Step1 基于Win11通过…
阅读更多...
Macs Fan Control 1.5.16 Pro for mac风扇调节软件

Macs Fan Control 1.5.16 Pro for mac风扇调节软件

Macs Fan Control是一款专门为 Mac 用户设计的软件&#xff0c;它可以帮助用户控制和监控 Mac 设备的风扇速度和温度。这款软件允许用户手动调整风扇速度&#xff0c;以提高设备的散热效果&#xff0c;减少过热造成的风险。 Macs Fan Control 可以在菜单栏上显示当前系统温度和…
阅读更多...
容器编排学习（二）镜像制作和私有仓库介绍

容器编排学习（二）镜像制作和私有仓库介绍

一 Dockerfile 1 概述 commit的局限 很容易制作简单的镜像&#xff0c;但碰到复杂的情况就十分不方便例如碰到下面的情况需要设置默认的启动命令需要设置环境变量需要指定镜像开放某些特定的端口 Dockerfile就是解决这些问题的方法 Dockerfile是一种更强大的镜像制作方式…
阅读更多...
如何基于国标GB28181视频平台EasyGBS国标云服务平台建设智慧环保在线监测系统

如何基于国标GB28181视频平台EasyGBS国标云服务平台建设智慧环保在线监测系统

EasyGBS平台可提供流媒体接入、处理、转发等服务&#xff0c;支持内网、公网的安防视频监控设备通过国标GB/T28181协议进行视频监控直播。基于视频图像的环保监督管理智能监控系统&#xff0c;结合了计算机技术、AI、云计算、网络传输技术和网络存储技术等先进技术&#xff0c;…
阅读更多...
数据分析面试题（2023.09.08）

数据分析面试题（2023.09.08）

数据分析流程 总体分为四层&#xff1a;需求层、数据层、分析层和结论层 一、统计学问题 1、贝叶斯公式复述并解释应用场景 公式&#xff1a;P(A|B) P(B|A)*P(A) / P(B)应用场景&#xff1a;如搜索query纠错&#xff0c;设A为正确的词&#xff0c;B为输入的词&#xff0c;那…
阅读更多...
Hugging News #0904： 登陆 AWS Marketplace

Hugging News #0904： 登陆 AWS Marketplace

每一周&#xff0c;我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新&#xff0c;包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等&#xff0c;我们将其称之为「Hugging News」。本期 Hugging News 有哪些有趣的消息&#xff0…
阅读更多...
Pytorch从零开始实战01

Pytorch从零开始实战01

Pytorch从零开始实战——MNIST手写数字识别 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——MNIST手写数字识别环境准备数据集模型选择模型训练可视化展示 环境准备 本系列基于Jupyter notebook&#xff0c;使用Python3.7.12&#xff0c;Py…
阅读更多...
CH06_第一组重构（下）

CH06_第一组重构（下）

封装变量&#xff08;Encapsulate Variable | 132&#xff09; 曾用名&#xff1a;自封装字段&#xff08;Self-Encapsulate Field&#xff09; 曾用名&#xff1a;封装字段&#xff08;Encapsulate Field&#xff09; let defaultOwner {firstName: "Martin", la…
阅读更多...
用半天时间从零开始复习前端之html

用半天时间从零开始复习前端之html

目录 前言 科班生的标配&#xff1a;半天听完一门标记型语言 准备工作 webstorm2022 webstrom 第一个html页面 body h系列标签 行标签和块标签 列表标签 表格标签&#xff08;另起一篇&#xff09; 万能的input 1.快速生成多个标签 2.同时选中多个 前言 科班生的标…
阅读更多...
系统报错“由于找不到msvcp140.dll无法继续执行代码”的处理方法

系统报错“由于找不到msvcp140.dll无法继续执行代码”的处理方法

我在使用电脑时&#xff0c;突然发现了一个错误提示&#xff1a;“无法启动程序&#xff0c;因为找不到msvcp140.dll文件”。这让我非常困惑&#xff0c;因为我确定这个文件应该存在于我的电脑上。但是电脑依然报错“由于找不到msvcp140.dll无法继续执行代码”&#xff0c;这个…
阅读更多...
【周末闲谈】如何利用AIGC为我们创造有利价值？

【周末闲谈】如何利用AIGC为我们创造有利价值？

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录 系列目录前言AIGCAI写作AI绘画AI视频生成AI语音合成 前言 在此之…
阅读更多...
Linux防火墙(iptables)

Linux防火墙(iptables)

一、linux的防火墙组成 linux的防火墙由netfilter和iptables组成。用户空间的iptables制定防火墙规则&#xff0c;内核空间的netfilter实现防火墙功能。 netfilter&#xff08;内核空间&#xff09;位于Linux内核中的包过滤防火墙功能体系&#xff0c;称为Linux防火墙的“内核…
阅读更多...
MHA高可用及故障切换

MHA高可用及故障切换

一、什么是 MHA MHA&#xff08;MasterHigh Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切换的过程中最大…
阅读更多...
Vue中如何实现城市3D分布图

Vue中如何实现城市3D分布图

cityfenbu.vue <template><div ><el-card class"seriesmap-box-card"><div slot"header" class"clearfix"><span>城市分布图 (点击可下钻到县)</span></div><div><div class"series-ma…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023