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.mzph.cn/news/73644.shtml

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

相关文章

如何制作一个百货小程序

如何制作一个百货小程序

在这个数字化时代&#xff0c;小程序已成为各行各业的必备工具。其中&#xff0c;百货小程序因其便捷性和多功能性&#xff0c;越来越受到人们的青睐。那么&#xff0c;如何制作一个百货小程序呢&#xff1f;下面&#xff0c;我们就详细介绍一下无需编写代码的步骤。 一、进入后…
阅读更多...
【C++基础】7. 控制语句

【C++基础】7. 控制语句

文章目录 【 1. 循环 】1.1 循环类型1.2 循环控制语句break 语句continue 语句goto 语句 1.3 无限循环 【 2. 选择 】switch 语句&#xff1f;&#xff1a;语句 【 1. 循环 】 1.1 循环类型 循环类型描述while 循环当给定条件为真时&#xff0c;重复语句或语句组。它会在执行…
阅读更多...
【django开发手册】详解drf filter中DjangoFilterBackend，SearchFilter，OrderingFilter使用方式

【django开发手册】详解drf filter中DjangoFilterBackend，SearchFilter，OrderingFilter使用方式

&#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是Zeeland&#xff0c;开源建设者与全栈领域优质创作者。&#x1f4dd; CSDN主页&#xff1a;Zeeland&#x1f525;&#x1f4e3; 我的博客&#xff1a;Zeeland&#x1f4da; Github主页: Undertone0809 (Zeeland)&…
阅读更多...
如何使用CSS实现一个响应式图片幻灯片（Responsive Image Slider）效果？

如何使用CSS实现一个响应式图片幻灯片（Responsive Image Slider）效果？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 响应式图片幻灯片⭐ HTML结构⭐ CSS样式⭐ JavaScript交互⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个…
阅读更多...
Astro建站教程：安装nodejs，npm下载Astro，安装扩展

Astro建站教程：安装nodejs，npm下载Astro，安装扩展

下载Nodejs LTS版&#xff1a;https://nodejs.org/en 安装步骤全默认即可&#xff0c;安装路径可以根据自己的爱好更改在桌面右键打开cmd或powershell&#xff0c;输入node -v和npm -v测试是否安装成功 浏览器打开https://docs.astro.build/en/install/auto/ 复制里面的npm cre…
阅读更多...
安全狗陈奋：数据安全需要建立在传统网络安全基础之上

安全狗陈奋：数据安全需要建立在传统网络安全基础之上

8月22日-23日&#xff0c;由创业邦主办的“2023 DEMO WORLD 企业开放式创新大会”在上海顺利举行。 作为国内云原生安全领导厂商&#xff0c;安全狗受邀出席此次活动。 本次大会以“拥抱开放”为主题&#xff0c;聚焦开放式创新&#xff0c;通过演讲分享、专场对接、需求发布…
阅读更多...
你用过 Maven Shade 插件吗？

你用过 Maven Shade 插件吗？

文章首发地址 Maven Shade插件是Maven构建工具的一个插件&#xff0c;用于构建可执行的、可独立运行的JAR包。它解决了依赖冲突的问题&#xff0c;将项目及其所有依赖&#xff08;包括传递依赖&#xff09;合并到一个JAR文件中。 下面是对Maven Shade插件的一些详解&#xff…
阅读更多...
MySQL知识笔记——初级基础（实施工程师和DBA工作笔记）

MySQL知识笔记——初级基础（实施工程师和DBA工作笔记）

老生长谈&#xff0c;MySQL具有开源、支持多语言、性能好、安全性高的特点&#xff0c;广受业界欢迎。 在数据爆炸式增长的年代&#xff0c;掌握一种数据库能够更好的提升自己的业务能力&#xff08;实施工程师&#xff09;。 此系列将会记录我学习和进阶SQL路上的知识&#xf…
阅读更多...
Revit SDK 介绍：RayTraceBounce 光线反弹

Revit SDK 介绍：RayTraceBounce 光线反弹

前言 这个例子模拟光线反弹。 内容 通过修改参数&#xff0c;从&#xff08;0&#xff0c;0&#xff0c;0&#xff09;点向&#xff08;1&#xff0c;0&#xff0c;0&#xff09;方向射出光线&#xff0c;经过若干次反弹之后的结果。如图所示&#xff1a; 在Revit API 中&…
阅读更多...
Codeforces-Round-895-Div-3

Codeforces-Round-895-Div-3

A. Two Vessels 题目翻译 你有两个装有水的容器。第一个容器含有 a a a克水&#xff0c;第二个容器含有 b b b克水。这两艘船都非常大&#xff0c;可以容纳任意数量的水。 您还有一个空杯子&#xff0c;最多可容纳 c c c克水。 一次&#xff0c;您可以从任何容器中舀出多 c…
阅读更多...
go语言基本操作--四

go语言基本操作--四

面向对象编程 对于面向对象编程的支持go语言设计得非常简洁而优雅。因为&#xff0c;Go语言并没有沿袭面向对象编程中诸多概念&#xff0c;比如继承(不支持继承&#xff0c;尽管匿名字段的内存布局和行为类似继承&#xff0c;但它并不是继承)、虚函数、构造函数和析构函数、隐…
阅读更多...
HTTP代理如何设置

HTTP代理如何设置

HTTP代理是一种非常重要的网络工具&#xff0c;它可以帮助我们在访问互联网时提高访问速度&#xff0c;保护用户隐私等等。在使用HTTP代理时&#xff0c;需要先进行设置。下面就来介绍一下HTTP代理如何设置。 一、了解HTTP代理 在开始设置HTTP代理之前&#xff0c;我们需要先了…
阅读更多...
html 标签简介

html 标签简介

概述 标签的效果不重要&#xff0c;重要的是标签的语义。 文本标签 文本标签用于包裹&#xff1a;词汇、短语等。排版标签&#xff0c;比如div,p,h1等。排版标签更宏观&#xff08;大段的文字&#xff09;&#xff0c;文本标签更微观&#xff08;词汇、短语&#xff09;。文…
阅读更多...
西门子LAD编程扫描周期带来的步序跳转问题

西门子LAD编程扫描周期带来的步序跳转问题

一、程序目的 按一下启动&#xff0c;程序进入第一步。延时五秒之后进入第二步进行自加1&#xff0c;然后回到第一步继续延时5秒循环&#xff0c;依次类推。 二、出现的问题 第一次程序进入第一步时&#xff0c;定时器正常定时&#xff0c;计数正常加1&#xff0c;但从第二轮开…
阅读更多...
文件上传漏洞-upload靶场5-12关

文件上传漏洞-upload靶场5-12关

文件上传漏洞-upload靶场5-12关通关笔记&#xff08;windows环境漏洞&#xff09; 简介 ​ 在前两篇文章中&#xff0c;已经说了分析上传漏的思路&#xff0c;在本篇文章中&#xff0c;将带领大家熟悉winodws系统存在的一些上传漏洞。 upload 第五关 &#xff08;大小写绕过…
阅读更多...
【DataV/echarts】vue中使用，修改地图和鼠标点击部分的背景色

【DataV/echarts】vue中使用，修改地图和鼠标点击部分的背景色

引入&#xff1a;使用 DataV 引入地图的教程是参考别人的&#xff0c;主要介绍修改地图相关的样式&#xff1b; 引入地图 是参考别人的&#xff0c;这里自己再整理一遍&#xff0c;注意需要安装 5 版本以上的 echarts&#xff1b; DataV 网址&#xff1a;https://datav.aliyun.…
阅读更多...
浅谈Http协议、TCP协议（转载）

浅谈Http协议、TCP协议（转载）

TCP标志位,有6种标示&#xff1a;SYN(synchronous建立联机) &#xff0c;ACK(acknowledgement 确认) &#xff0c;PSH(push传送)&#xff0c;FIN(finish结束) &#xff0c;RST(reset重置)&#xff0c; URG(urgent紧急) Sequence number(顺序号码) &#xff0c;Acknowledge num…
阅读更多...
《向量数据库指南》——向量数据库Milvus Cloud 2.3的可运维性：从理论到实践

《向量数据库指南》——向量数据库Milvus Cloud 2.3的可运维性：从理论到实践

一、引言 在数据科学的大家庭中，向量数据库扮演着重要角色。它们通过独特的向量运算机制，为复杂的机器学习任务提供了高效的数据处理能力。然而，如何让这些数据库在生产环境中稳定运行，成为了运维团队的重要挑战。本文将深入探讨向量数据库的可运维性，并分享一些有趣的案…
阅读更多...
新风机未来什么样？

新风机未来什么样？

新风机在未来将会有许多令人期待的发展和改进&#xff0c;让我们一起来看一看吧&#xff01;以下是新风机未来的一些可能性&#xff1a; 智能化和智能家居&#xff1a;新风机将更多地与智能家居系统整合&#xff0c;通过物联网和人工智能技术&#xff0c;实现智能控制和智能调节…
阅读更多...
听觉刺激期间的神经血管耦合：ERPs和fNIRS血流动力学

听觉刺激期间的神经血管耦合：ERPs和fNIRS血流动力学

导读 强度依赖性振幅变化(IDAP)已在事件相关电位(ERPs)中进行了广泛的研究&#xff0c;并与多种精神疾病相关联。本研究旨在探讨功能近红外光谱(fNIRS)在IDAP范式中的应用&#xff0c;该范式与ERPs相关&#xff0c;可以指示神经血管耦合的存在。两个实验分别有33和31名参与者。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023