【vue+vue-treeselect】根据指定字段,如isLeaf(是否末级节点),设置只允许末级节点可以选

news2024/12/24 10:12:35

1、当项目有特殊要求,必须根据某个字段的值去判断,是否节点可以选,即使已经是末级节点了,还是需要根据字段判断是否禁用
在这里插入图片描述

(1) :flat="true"一定要设置
(2)获取数据源的时候,设置下禁用判断,vue-treeselect的禁用是isDisabled属性
(3)isLeaf有值就要禁用

 <TreeSelect
                  style="width: 220px"
                  v-model="form.id"
                  :options="orgOptions"
                  :flat="true"               
                  no-options-text="暂无可用选项"
                  :normalizer="deptnormalizer"
                  placeholder="请选择"
                  @select="node => orgHandleSelect(node)"
                >
                  <div slot="value-label" slot-scope="{ node }">{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}</div>
                  <div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
                    {{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}
                  </div>
                </TreeSelect>
 TreeSelect().then(response => {
        this.orgOptions = response.data
        this.orgOptions.map(item => {
          this.getLeafKeys(item)
        })
      })
   getLeafKeys(node) {
   //判断是否要禁用的条件,isLeaf有值就要禁用
      if (!(node.isLeaf=== undefined || node.isLeaf=== '')) {     
        node.isDisabled = true
      }
      node.children.forEach(item => this.getLeafKeys(item))
    },
deptnormalizer(node) {
  if (node.children && !node.children.length) {
    delete node.children
  }
   return {
    id: node.id,
    label: node.label,
    children: node.children,
    isDisabled: node.isDisabled

  }

},

2、当项目没有特殊要求,只是要求只有末级节点可以选,直接加 :disable-branch-nodes="true"就行,最左侧没有下拉三角形的都可以选,有三角形的都不可以选
在这里插入图片描述

 <TreeSelect
                  style="width: 220px"
                  v-model="form.id"
                  :options="orgOptions"    
                  :disable-branch-nodes="true"          
                  no-options-text="暂无可用选项"
                  :normalizer="deptnormalizer"
                  placeholder="请选择"
                  @select="node => orgHandleSelect(node)"
                >
                  <div slot="value-label" slot-scope="{ node }">{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}</div>
                  <div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
                    {{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}
                  </div>
                </TreeSelect>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

制造业为什么需要质量管理系统

质量管理是一个企业最重要的核心竞争力之一。为了确保产品和服务的高质量&#xff0c;企业需要建立一个完善的质量管理体系。而质量管理系统&#xff08;QMS&#xff09;正是指导企业如何规范、组织和管理质量相关活动的框架和流程。 在智能制造时代&#xff0c;广大企业如何结…

数组中两个字符串的最小距离

给定一个字符串数组strs&#xff0c;再给定两个字符串str1和str2&#xff0c;返回在strs中str1和str2的最小距离&#xff0c;如果str1或str2为null&#xff0c;或不在strs中&#xff0c;返回-1。 输入描述&#xff1a; 输入包含有多行&#xff0c;第一输入一个整数n(1 ≤ n ≤…

苹果平板HOME键成历史,全面屏时代到来?2024平板电脑市场趋势分析

近期苹果公司在“放飞吧”发布会上推出了新款iPad Pro和iPad Air平板电脑&#xff0c;并下架了最后一款带有实体Home按键的iPad 9。这一变化标志着Home键在苹果iPad产品线中成为了历史&#xff0c;引起了不少网友的怀念和感慨。 与此同时&#xff0c;今年3月线上平板电脑市场迎…

js api part6

正则表达式 正则表达式 &#xff08;Regular Expression&#xff09;是用于 匹配字符串中字符组合 的模式。在 JavaScript中&#xff0c;正则表达式也是对象。通常用来查找、替换那些符合正则表达式的文本&#xff0c;许多语言都支持正则表达式。 正则表达式在 JavaScript中的…

猫不爱喝水是正常的?求求別再被洗脑了!日常可以补水的主食分享

猫不爱喝水正常吗&#xff1f;看给猫喂的什么&#xff0c;喂的罐头的话不爱喝水问题不大。喂的干粮猫还长期不喝水&#xff0c;处于缺水状态&#xff0c;可能会出现便秘、上火、尿黄、尿少等症状。在高温的夏季&#xff0c;猫还可能因脱水而中暑&#xff0c;严重时甚至可能导致…

上传文件客户端签名直传

上传文件的客户端签名直传是一种常用的将文件直接上传到云存储服务如Amazon S3、阿里云OSS等云服务上的技术手段。这种方法通常用于减轻服务器负担&#xff0c;并提高上传效率。 以下是实现客户端签名直传的基本步骤&#xff1a; 1. 客户端请求上传权限 客户端&#xff08;如…

地平线的花样年华

北京车展在这个喧闹的“五一”假期落幕了&#xff0c;它留给我们许多思考。 虽然社会面的传播焦点落在了“网红”两个字上&#xff0c;但技术的更新依然如暗流涌动&#xff0c;给这届北京车展写下注脚。整个过程前后&#xff0c;最重要和吸引了最多目光的&#xff0c;是智驾&a…

【光速上手 Hydra 】一行代码自动跑多次实验,Hydra 中的 Multirun 参数如何使用?

Hydra 是一个开源的 Python 框架&#xff0c;简化了研究和其他复杂应用的开发。其关键特性是能够通过组合动态地创建一个分层次的配置&#xff0c;并通过配置文件和命令行进行覆盖。Hydra 的名称来源于其能够运行多个类似的作业 - 就像一个有多个头的九头蛇一样。 主要特性&am…

Ubuntu18.04 安装 anconda

anaconda官网 bash Anaconda3-2021.11-Linux-x86_64.sh一直回车&#xff0c;输入yes 选择安装目录 是否希望更新shell配置文件以自动初始化conda

如何缩小图片大小kb?6个压缩图片大小的软件教你快速压缩

如何缩小图片大小kb&#xff1f;6个压缩图片大小的软件教你快速压缩 当需要缩小图片的大小&#xff08;KB&#xff09;时&#xff0c;可以利用一系列专门设计的工具和软件来帮助完成这一任务。这些工具可以有效地减小图片的文件大小&#xff0c;而又不会明显降低图片的质量。以…

2024速通python之python基础

文章目录 一、你好&#xff0c;世界二、基本数据类型&#xff08;1&#xff09;数字型&#xff08;2&#xff09;字符串&#xff08;3&#xff09;列表&#xff08;4&#xff09;元组&#xff08;5&#xff09;集合&#xff08;6&#xff09;字典 二、注释&#xff08;1&#x…

机器学习 | 时间序列预测中的AR模型及应用

自回归模型&#xff0c;通常缩写为AR模型&#xff0c;是时间序列分析和预测中的一个基本概念。它们在金融、经济、气候科学等各个领域都有广泛的应用。在本文中&#xff0c;我们将探索自回归模型&#xff0c;它们如何工作&#xff0c;它们的类型和实际例子。 自回归模型 自回…

JS-导入导出

export和export default是ES6中导出模块中变量的语法 导入导出变量 //导出方法&#xff08;js文件中&#xff09; export const 变量名值//导入方法 对应导入的变量&#xff0c;一定要加花括号 import {变量名} from js文件路径 导入导出函数 //导出方法&#xff08;js文件中…

头歌实践教学平台:CG3-v2.0-图形几何变换

第2关&#xff1a;图形的平移与缩放 一. 任务描述 1. 本关任务 (1) 理解几何变换基本原理, 掌握平移和缩放变换的方法; (2) 根据几何变换基本原理,将main函数中的空白部分补充完整。 2. 输入 (1) 代码将自动输入一个边长为2的obj正方体模型&#xff0c;具体模型如下图&…

解决windows中的WS Llinux子系统(unbantu2204)访问网络失败问题?

一、问题描述 unbantu先前可以正常访问网络&#xff0c;后面用着用着发现上不了网了&#xff0c; 出现如下异常 Hmm. We’re having trouble finding that site.We can’t connect to the server at www.iqiyi.com.If you entered the right address, you can:Try again late…

PyQt:进度条实现(下载、复制)实时进度显示

一、实现思路 源文件:①被复制的文件&#xff08;一般在客户端自身PC上&#xff09;&#xff1b;②被下载的文件&#xff1b;&#xff08;一般在服务器上&#xff09;。 缓存文件&#xff1a;正在粘贴/下载获取中的文件&#xff0c;粘贴/下载完成前&#xff0c;一般是不完整的…

Pytorch学习笔记——卷积操作

一、认识卷积操作 卷积操作是一种数学运算&#xff0c;它涉及两个函数&#xff1a;输入函数&#xff08;通常是图像&#xff09;和卷积核&#xff08;也称为滤波器或特征检测器&#xff09;。卷积核在输入函数上滑动&#xff0c;将核中的每个元素与其覆盖的输入函数区域中的对应…

基于ConvNeXt网络的图像识别

1、前言 ConvNeXt 网络基于传统的卷积神经网络&#xff0c;与当下 transformer当道而言简直是一股清流 ConvNeXt并没有特别复杂或者创新的结构 ConvNeXt 网络有五种大小&#xff0c;可以参考下面 2、项目实现 完整的项目如下&#xff1a; 这里参考了网上的ConvNeXt 模型&…

揭秘App如何翻倍广告收益:科学变现的秘诀

在数字时代&#xff0c;移动应用&#xff08;App&#xff09;已成为日常生活的一部分。无论是娱乐、教育还是工具类应用&#xff0c;它们为用户提供了便捷的服务。然而&#xff0c;许多App开发者面临一个共同的挑战&#xff1a;如何在免费的基础上实现盈利&#xff1f;答案之一…

生产制造中刀具管理系统,帮助工厂不再频繁换刀

一、刀具管理的定义与重要性 刀具管理是指对生产过程中使用的各种刀具进行计划、采购、存储、分配、使用、监控、维修和报废等全过程的管理。刀具作为制造过程中的直接工具&#xff0c;其性能、质量和使用效率直接影响产品的加工精度、表面质量和生产效率。因此&#xff0c;建…