vue Treeselect下拉树只能选择第N级元素实现代码

 更新时间:2020-09-01 01:04:50   作者:佚名   我要评论(0)

今天在项目中遇到一个需求,就是vue下拉树只能选择第三级选项,为了解决这个问题,查阅了官方文档
https://vue-treeselect.js.org/#disable-item-selection

然后看

今天在项目中遇到一个需求,就是vue下拉树只能选择第三级选项,为了解决这个问题,查阅了官方文档

https://vue-treeselect.js.org/#disable-item-selection

然后看到isDisabled属性可以禁止选择,具体实现代码如下:

<treeselect 
  :disable-branch-nodes="true"
  :normalizer="normalizer" 
  v-model="formData.goodsTypeId" 
  :multiple="false" 
  :options="goodsType" 
  placeholder='请选择'>
  <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, 
   countClassName }">
     {{ node.label }}
  </label>
</treeselect>

如何给数据添加isDisabled属性呢?

自己尝试着在下拉树配置中添加了一下,竟然成功了

【提示】node这个对象包含的字段打印了一下,(这些数据是后台接口提供的)如下图展示:

【isLeaf】Y是叶子节点,N是分支节点【typeLevel】第?级

normalizer(node) {
  //去掉children=[]的children属性
  if(node.children && !node.children.length) {
   delete node.children;
  }
  if(node.isLeaf=='Y' && node.typeLevel!=3){
   node['isDisabled'] = true;
  }
  return {
   id: node.typeId,
   label: node.typeName,
   children: node.children,
  }       
},

补充知识:Vue ElementUI使用el-tree,只容许叶子结点有多选框

在使用el-tree时,我们需要多选功能会在el-tree标签添加show-checkbox属性:

那么,有时会遇到这样的需求,父节点不让多选,只容许多选叶子结点。那么,这时我们改怎么做呢?

通过调试工具:

多选框就是.el-checkbox这个样式,那么我们只需把这个样式覆盖一下,把它隐藏掉:

/deep/ .el-tree-node{
   .is-leaf + .el-checkbox .el-checkbox__inner{
     display: inline-block;
   }
   .el-checkbox .el-checkbox__inner{
     display: none;
   }
 }

注意:/deep/ 是强穿透,也可以写成<<< ,只在当前组件文件起作用,不改变整个页面样式。

最后别忘了在el-tree组件加上 :check-strictly="true" 是否严格的遵循父子不互相关联的做法

以上这篇vue Treeselect下拉树只能选择第N级元素实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • vue 监听 Treeselect 选择项的改变操作
  • vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
  • vue treeselect获取当前选中项的label实例

相关文章

  • vue Treeselect下拉树只能选择第N级元素实现代码

    vue Treeselect下拉树只能选择第N级元素实现代码

    今天在项目中遇到一个需求,就是vue下拉树只能选择第三级选项,为了解决这个问题,查阅了官方文档 https://vue-treeselect.js.org/#disable-item-selection 然后看
    2020-09-01
  • C# 如何解析获取Url参数值

    C# 如何解析获取Url参数值

    今天遇到一个需求,需要处理通过接口传过来的一个参数,参数内容为一个拼接好的Url地址,且该地址还会携带了一些额外的参数,包括但不限于数字,字符串,json串。样
    2020-09-01
  • Python Matplotlib绘图基础知识代码解析

    Python Matplotlib绘图基础知识代码解析

    1.Figure和Subplot import numpy as np import matplotlib.pyplot as plt #创建一个Figure fig = plt.figure() #不能通过空figure绘图,必须使用add_subplot创
    2020-09-01
  • Python动态类型实现原理及过程解析

    Python动态类型实现原理及过程解析

    在python中,我们使用变量时,并没有声明变量的存在和类型。类型是在运行过程中自动决定的。 a = 3 python将会执行三步去完成上面这个请求。 1.创建一个对象代表
    2020-09-01
  • Python Opencv图像处理基本操作代码详解

    Python Opencv图像处理基本操作代码详解

    1.图像读取 使用cv2.imread(filepath,flags)读入图像 filepath: 读入图像完整路径(绝对路径,相对路径) flags: 读入图像标志 cv2.IMREAD_COLOR:默认
    2020-09-01
  • Spring Boot 集成 Sharding-JDBC + Mybatis-Plus 实现分库分表功能

    Spring Boot 集成 Sharding-JDBC + Mybatis-Plus 实现分库分表功能

    一、 Sharding-jdbc简介 “ Sharding-jdbc是开源的数据库操作中间件;定位为轻量级Java框架,在Java的JDBC层提供的额外服务。它使用客户端直连数据库,以jar包形式
    2020-08-27
  • 解决SpringBoot jar包中的文件读取问题实现

    解决SpringBoot jar包中的文件读取问题实现

    前言 SpringBoot微服务已成为业界主流,从开发到部署都非常省时省力,但是最近小明开发时遇到一个问题:在代码中读取资源文件(比如word文档、导出模版等),本地开
    2020-08-27
  • js实现批量删除功能

    js实现批量删除功能

    本文实例为大家分享了js实现批量删除功能的具体代码,供大家参考,具体内容如下 界面如下: 勾选复选框会自动记录id,设置value=“id”即可 下面是全选操作(js)
    2020-08-27
  • 这一次搞懂Spring事务是如何传播的

    这一次搞懂Spring事务是如何传播的

    前言 上一篇分析了事务注解的解析过程,本质上是将事务封装为切面加入到AOP的执行链中,因此会调用到MethodInceptor的实现类的invoke方法,而事务切面的Interceptor
    2020-08-27
  • mybatisplus报Invalid bound statement (not found)错误的解决方法

    mybatisplus报Invalid bound statement (not found)错误的解决方法

    搭建项目时使用了mybatisplus,项目能够正常启动,但在调用mapper方法查询数据库时报Invalid bound statement (not found)错误。 以下为项目配置 pom文件 <depend
    2020-08-27

最新评论