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


Posted in Javascript onAugust 31, 2020

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

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

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

然后看到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这个对象包含的字段打印了一下,(这些数据是后台接口提供的)如下图展示:

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

【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 Treeselect下拉树只能选择第N级元素实现代码

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

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

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

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

通过调试工具:

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

多选框就是.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级元素实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 内存释放问题
Apr 25 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 #Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 #Javascript
搭建vscode+vue环境的详细教程
Aug 31 #Javascript
vue组件中实现嵌套子组件案例
Aug 31 #Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 #Javascript
详解vue v-model
Aug 31 #Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 #Javascript
You might like
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
jQuery参数列表集合
2011/04/06 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
工程售后服务承诺书
2014/05/21 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
Redis主从复制操作和配置详情
2022/09/23 Redis