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 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
vue实现自定义多选按钮
Jul 16 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
基于JS实现视频上传显示进度条
2020/05/12 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
python属于哪种语言
2020/08/16 Python
利用python绘制正态分布曲线
2021/01/04 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
介绍一下linux的文件系统
2012/03/20 面试题
大学活动总结格式
2014/04/29 职场文书
党员志愿者活动方案
2014/08/28 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
签证工作证明模板
2015/06/15 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js