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自动缩小超出大小的图片
Oct 12 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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分割合并两个字符串的函数实例
2015/06/19 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
Python多线程和队列操作实例
2015/06/21 Python
使用python实现接口的方法
2017/07/07 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python中qutip用法示例详解
2020/10/02 Python
法学毕业生自我鉴定
2014/01/31 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
出生公证书
2015/01/23 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers