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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 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网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP进程通信基础之信号
2017/02/19 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
javascript 闭包疑问
2010/12/30 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
微信小程序实现轮播图效果
2017/09/07 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
python3简单实现微信爬虫
2015/04/09 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python3安装crypto出错及解决方法
2019/07/30 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
怎样填写就业意向
2014/04/02 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript