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，一经查实，立即删除！

相关文章

使用skvideo.io.vread读取avi视频，报错“No way to determine width or height from video...”

使用skvideo.io.vread读取avi视频，报错“No way to determine width or height from video...”

问题描述&#xff1a; 一开始安装sk-video&#xff0c;在使用skvideo.io.vread读取avi视频&#xff0c;报错“No way to determine width or height from video. Need -s in inputdict. Consult documentation on I/O.” 解决方案&#xff1a; 1. 卸载sk-video pip uninsta…
阅读更多...
如何制作一个百货小程序

如何制作一个百货小程序

在这个数字化时代&#xff0c;小程序已成为各行各业的必备工具。其中&#xff0c;百货小程序因其便捷性和多功能性&#xff0c;越来越受到人们的青睐。那么&#xff0c;如何制作一个百货小程序呢&#xff1f;下面&#xff0c;我们就详细介绍一下无需编写代码的步骤。 一、进入后…
阅读更多...
深入理解联邦学习——联邦学习与现有理论的区别与联系

深入理解联邦学习——联邦学习与现有理论的区别与联系

分类目录&#xff1a;《深入理解联邦学习》总目录 作为一种全新的技术&#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)&…
阅读更多...
Java基础：反射

Java基础：反射

目录 一 概述二 反射的三种方式1、通过已实例化的java对象获取&#xff1a;xxx.getClass()2、通过类名获取&#xff1a;xxx.class3、通过类的全路径获取&#xff1a;Class.forName("xxx") 三 获取并使用类的构造方法1、获取构造方法&#xff1a;2、调用构造方法&…
阅读更多...
Expected a mapping or list of mappings for merging, but found scalar

Expected a mapping or list of mappings for merging, but found scalar

最近&#xff0c;在将项目转移到CircleCI时&#xff0c;遇到了这样一个错误&#xff0c;经过调查发现都说可能的原因缩进的问题导致的&#xff0c; 例如&#xff1a; definitions:steps:- step: &prepare-build-envname: Prepare build env 这里的name和- step 行之间应…
阅读更多...
如何使用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…
阅读更多...
糖生物学要点.4- 学习指南

糖生物学要点.4- 学习指南

学习指南 转到&#xff1a; 第1章 历史背景与概述 哪些因素阻碍了聚糖生物学&#xff08;“糖生物学”&#xff09;研究与传统分子和细胞生物学的整合&#xff1f; 为什么进化反复选择聚糖作为所有细胞表面的主要分子&#xff1f; 解释细胞外聚糖和核/胞质聚糖之间的区别。 影响…
阅读更多...
安全狗陈奋：数据安全需要建立在传统网络安全基础之上

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

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…
阅读更多...
day 53 | 25. K 个一组翻转链表

day 53 | 25. K 个一组翻转链表

25. K 个一组翻转链表 面试真的碰到了&#xff0c;可惜没a出来。 没啥特殊的算法&#xff0c;就是很难绕出来感觉。 /*** Definition for singly-linked list.* type ListNode struct {* Val int* Next *ListNode* }*/ func reverseKGroup(head *ListNode, k int) *L…
阅读更多...
初学python的感受

初学python的感受

目录 初学感受学习计划学习目标 初学感受 刚学python的我惊讶的发现编程语言之间竟有如此多的相似之处,因此在学python的时候相对于学C语言时要轻松的多,虽然二者也有一些不同之处,但是我想只要对二者稍微区分的话应该不会搞混的,并且在学习的过程中也可以借鉴学C语言的方法去…
阅读更多...
MySQL知识笔记——初级基础（实施工程师和DBA工作笔记）

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

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

同一台Windows机器中启动多个Memcached服务

假设Memcached在如下目录&#xff1a;C:\memcached\memcached.exe 在CMD中执行如下命令即可再安装一个Memcached服务&#xff08;记得换个端口号啊&#xff01;&#xff09;&#xff1a; sc create "Memcached Server1" start auto binPath "C:\memcached\mem…
阅读更多...
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;我们需要先了…
阅读更多...
最新文章

Copyright @ 2022~2023