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 读取图片文件的大小
Jun 25 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
关于Vue中axios的封装实例详解
Oct 20 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中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
js实现随机点名小功能
2017/08/17 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python装饰器深入学习
2018/04/06 Python
python 读入多行数据的实例
2018/04/19 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
Java面向对象面试题
2016/12/26 面试题
大学生求职自荐信
2013/12/12 职场文书
个人借条范本
2015/05/25 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android