vue-treeselect 【单选/多选】的时候只选择最后一层(绑定的值只绑定最后一层)

欢迎访问我的个人博客 |snows_l's BLOGhttp://snows-l.site

一、单选

       1、问题:

        vue-treeselect 单选的时候只选择最后一层(绑定的值只绑定最后一层)

       2、方法

        1、只需要加上  :disable-branch-nodes="true" 就行,官方解释为:禁用节点

                设置 disableBranchNodes: true 为使分支节点不可检查,并将其仅视为可折叠文件夹

        2、代码如下:
// template
<XTreeselectv-if="form.type == '2'"v-model="form.id":options="versionList":normalizer="tenantIdnormalizer":disable-branch-nodes="true"@input="handleVersionChange"noOptionsText="暂无数据"placeholder="点击选择"
></XTreeselect>

js

// 整理后端数据给组件使用
tenantIdnormalizer(node) {if (node.child && !node.child.length) {delete node.children;}return {id: node.id || "0",label: node.name,children: node.child,};
},// 改变的因需求而定  
handleVersionChange(val) {if (this.form.type == 1) {this.form.version = this.versionList.find((item) => item.value == val).label;} else {let arr = this.flattenTree(this.versionList, "child");let row = arr.find((item) => item.id == val);if (row) {this.form.version = row.name;}}
},

二、多选

       1、问题:

        vue-treeselect 多选的时候只选择最后一层(绑定的值只绑定最后一层)

       2、方法

        1、只需要加上  value-consists-of="LEAF_PRIORITY"  就行,官方解释为: 防止价值组合 

对于非固定和多选模式,如果选中了分支节点及其所有后代,则vue-treeselect会将它们组合到值数组中的单个项目中,如以下示例所示。通过使用valueConsistsOf道具,您可以更改该行为。该道具有四个选项:

  • "ALL" - 选中的所有节点都将包含在 value 数组中
  • "BRANCH_PRIORITY"(默认)-如果选中了分支节点,则其所有后代将被排除在value 数组之外
  • "LEAF_PRIORITY" - 如果选中了分支节点,则此节点本身及其分支后代将从value阵列中排除,但其叶后代将包括在内
  • "ALL_WITH_INDETERMINATE" -选中的任何节点将包括在value 数组中,另外还有不确定的节点

           2、代码图下
// template
<XTreeselectv-model="form.model":multiple="true":options="manufacturerModelList"value-consists-of="LEAF_PRIORITY":normalizer="tenantIdnormalizer"noOptionsText="暂无数据"placeholder="点击选择"
></XTreeselect>

js通单选

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

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

相关文章

Python的那些事第四十五篇:继承自Nose的测试框架Nose2

Nose2:继承自Nose的测试框架 摘要 本文深入探讨了Nose2这一继承自Nose的测试框架。在软件开发过程中,测试是确保代码质量和稳定性的重要环节,而测试框架为测试工作的开展提供了有力支持。Nose2作为Nose的继承者,在保留Nose优势的基础上进行了诸多改进和扩展,为Python测试…

LLM后训练:解锁大型语言模型推理能力的关键路径

引言&#xff1a;从语言生成到逻辑推理的跃迁 大型语言模型&#xff08;LLMs&#xff09;通过预训练掌握了海量语言模式&#xff0c;但其核心缺陷——幻觉、逻辑断裂、价值观偏差——暴露了单纯预训练的局限性。后训练&#xff08;Post-Training&#xff09;作为预训练后的精修…

Rabit

之前发过rabit了&#xff0c;所以这里不再赘述&#xff0c;讲讲原理 在线Rabbit加密 | Rabbit解密- 在线工具 (sojson.com) rabbit加密原理 Rabbit加密算法是一种流密码算法&#xff0c;由Daniel J. Bernstein设计&#xff0c;并被广泛用于多种加密和安全通信应用中。它的设…

coding ability 展开第四幕(滑动指针——巩固篇)超详细!!!!

文章目录 前言水果成篮思路 找到字符串中所有字母异位词思路 串联所有单词的子串思路 最小覆盖子串思路 总结 前言 本专栏上一篇博客&#xff0c;带着大家从认识滑动窗口到慢慢熟悉 相信大家对滑动窗口已经有了大概的认识 其实主要就是抓住——一段连续的区间 今天来学习一些滑…

“消失的中断“

“消失的中断” 1. 前言 在嵌入式开发过程中&#xff0c;中断必不可少。道友们想必也经常因为中断问题头疼不已&#xff0c;今天来说说一个很常见的问题&#xff0c;“消失的中断”。最近项目在使用第三方MCAL的时候&#xff0c;就遇到了I2C中断丢失的问题&#xff0c;排查起…

阿里云魔笔低代码应用开发平台快速搭建教程

AI低代码&#xff0c;大模型时代应用开发新范式 什么是魔笔 介绍什么是魔笔低代码应用开发平台。 魔笔是一款面向全端&#xff08;Web、H5、全平台小程序、App&#xff09;场景的模型驱动低代码开发平台&#xff0c;提供一站式的应用全生命周期管理&#xff0c;包括可视化开发…

Obsidian Copilot:打造你的专属 AI 笔记助手

Obsidian Copilot作为一款非常受欢迎的Obsidian插件&#xff0c;不仅极大地提升了用户的笔记管理和信息检索效率&#xff0c;还通过其多样化的AI功能为用户带来了前所未有的便捷体验。本文将详细介绍Obsidian Copilot的核心特点、使用方法及个人体验分享。 核心特点 Obsidian…

聊聊 Redis 的一些有趣的特性(上)

聊聊 Redis 的一些有趣的特性&#xff08;上&#xff09; 一、持久化 Redis 是内存数据库&#xff0c;数据全部保存在内存中。如果服务器发生宕机&#xff0c;内存中的数据将会全部丢失。为防止系统崩溃后数据丢失&#xff0c;Redis 提供了持久化功能&#xff0c;可将内存中的…

【结构设计】3D打印创想三维Ender 3 v2

【结构设计】3D打印创想三维Ender 3 v2 文章目录 前言一、Creality Slicer1.2.3打印参数设置二、配件更换1.捆扎绑扎线2.气动接头3D打印机配件插头3.3D打印机配件Ender3pro/V2喷头套件4.读卡器 TF卡5.micro sd卡 三、调平四、参考文章总结 前言 使用工具&#xff1a; 1.创想三…

吴恩达机器学习笔记复盘(五)均方误差函数

只讲了线性回归的代价函数。 均方误差&#xff08;Mean Squared Error, MSE&#xff09; 均方误差&#xff08;MSE&#xff09;基于最小二乘法&#xff0c;通过计算预测值与真实值之间差值的平方的平均值来衡量模型的误差。 原理 假设我们有一组数据集&#xff0c;其中是第…

Vue生命周期_Vue生命周期钩子

一、生命周期介绍 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤&#xff0c;比如设置好数据侦听&#xff0c;编译模板&#xff0c;挂载实例到 DOM&#xff0c;以及在数据改变时更新 DOM。 在此过程中&#xff0c;它也会运行被称为生命周期钩子的函数&#xff0c;让…

arthas常用命令

文章目录 1. dashboard仪表板2. 通过thread命令来获取到math-game.jar进程的Main Class3. 通过jad来反编译Main Class4. watch监视5. 退出arthas6. 小结 欢迎关注 性能测试和优化 专栏&#xff1a;https://blog.csdn.net/qq_41684621/category_12910565.html 1. dashboard仪表…

c#Winform也可以跨平台了GTK框架GTKSystem.Windows.Forms

一、简介 >> 新版下载&#xff0c;问题求助 QQ群&#xff1a;1011147488 1032313876 236066073&#xff08;满&#xff09; Visual Studio原生开发&#xff0c;无需学习&#xff0c;一次编译&#xff0c;跨平台运行. C#桌面应用程序跨平台&#xff08;windows、linux、…

Vue3 Pinia的getters属性

Pinia的getters属性 定义一个bigSum&#xff0c;值是sum*10 可以写成箭头函数的形式upperSchool中使用了this&#xff0c;不能写成箭头函数的形式

Atcoder ABC397-D 题解

https://atcoder.jp/contests/abc397/tasks/abc397_dhttps://atcoder.jp/contests/abc397/tasks/abc397_d 题目描述&#xff1a; 确定是否存在一对正整数,使得 思路&#xff1a; 首先对方程进行转化 设 即 接下来确定的范围 根据立方差公式 因此&#xff0c;我们可以从到来…

医疗送药机器人“空间拓扑优化+动态算法决策+多级容错控制”三重链式编程技术解析与应用

一、引言 1.1 研究背景与意义 在医疗体系中,高效精准的药品配送是保障医疗服务质量和患者安全的关键环节。随着医疗技术的不断进步和医疗需求的日益增长,传统的人工送药方式逐渐暴露出诸多弊端,如配送效率低下、易受人为因素干扰导致错误率上升、人力成本高昂等。特别是在…

Redis实现高并发排行榜的功能

生活中排行榜是常见的功能&#xff0c;如游戏的排行榜&#xff0c;销售额的排行榜等等&#xff0c;排行榜不仅可以让用户有更多的激情参与到活动中来&#xff0c;而且可以更好的留存住用户&#xff0c;如下所示的拉新排行榜&#xff1a; 排行榜是一个常见的业务需求&#xff0…

数字孪生像魔镜,映照出无限可能的未来

在当今科技飞速发展的时代&#xff0c;数字孪生作为一项极具潜力的前沿技术&#xff0c;正逐渐崭露头角&#xff0c;成为众多领域关注的焦点。它犹如一面神奇的魔镜&#xff0c;以数字化的方式精准映照出现实世界中的各种实体与系统&#xff0c;为我们开启了一扇通往无限可能未…

每日一题---

深拷贝和浅拷贝的区别是什么&#xff1f; null 浅拷贝是指只复制对象本身和其内部的值类型字段&#xff0c;但不会复制对象内部的引用类型字段。换句话说&#xff0c;浅拷贝只是创建一个新的对象&#xff0c;然后将原对象的字段值复制到新对象中&#xff0c;但如果原对象内部有…

Chrome 扩展开发 API实战:Sessions (六)

1. 引言 chrome.sessions 是 Chrome 扩展开发者工具的一部分&#xff0c;提供了对最近关闭的标签页和窗口的访问&#xff0c;以及对会话恢复功能的支持。现代浏览器的一个显著特点是为用户提供更多的便利性&#xff0c;比如快速恢复意外关闭的页面。通过 chrome.sessions API&…