element-ui tree 根据不同叶子节点设置是否显示复选框
公司业务要求不同根节点配置显示与否复选框,官方文档没有这样的配置,所以想到了修改element-ui源码。
1.这里将“node_modules\element-ui\packages”下的tree文件夹整体复制到自己的项目目录(customComponent)中

2.修改tree.vue
<el-checkbox
v-if="showCheckbox"
:style="{ 'visibility': node.data.leaf?'hidden':'visible' }"
v-model="node.checked"
:indeterminate="node.indeterminate"
:disabled="!!node.disabled"
@click.native.stop
@change="handleCheckChange"
>
</el-checkbox>
<!-- 上面第三行是我添加的,node.data.leaf是后台传过来的标识,用来判断是否显示复选框,大家根据自己的树数据进行更换 -->
3.在使用到tree组件的文件中引入tree.vue,并且声明一下就可以使用了,跟使用<el-tree>的方式一样。
参考文章:https://www.jianshu.com/p/5290ef00829f
element-ui tree 根据不同叶子节点设置是否显示复选框的更多相关文章
- DOM(十)使用DOM设置单选按钮、复选框、下拉菜单
1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...
- ElementUi tree 指定节点是否显示复选框
场景:树的内容是省份下面的城市有酒店 需求:只能多选酒店(为了删除它们),至于为啥不能选省份或者城市更加灵活的去删除相应酒店,这你得去问后台0.0,他只弄了根据酒店id去删除.嗯,连创建酒店的时候级联 ...
- Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置
QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有m ...
- 【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态
0.页面中准备树的ul <ul id="treeDemo10" class="ztree" style="display: none;" ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- 判断easyUI tree 节点复选框是否被选中的方法。将选中的节点高亮显示的方法
在datagrid tree中如何判断某个节点的复选框是否被选中? 我们可以通过HTML结构去分析: 1.节点未选中前 2.节点选中后 所以节点被选中前和选中后,html中的class类是用区分的. ...
- 关于textjs的tree带复选框的树
通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- php部分--例子:租房子(复选框的全选、数组拼接成字符串、设置复选框的name值、)
1.链接数据库 <?php include("DBDA.class.php"); $db=new DBDA(); $sql="select * from fangz ...
随机推荐
- OSGi教程:Resource API Specification
此教程基于OSGi Core Release 7 OSGi Resource API规范 详细内容上面英文教程有详细解答 下面主要是一些个人见解,若有不当之处,欢迎指出: Resource:就是能够被 ...
- 廖雪峰Python总结2
1.切片 L[0:3]表示,从索引0开始,直到索引3为止,但是不包括索引3.如果第一个索引是0,还可以省略L[:3] 倒数切片:L[-n:-1],-1是倒数第一个元素,L[-n:-1]不包括倒数第一个 ...
- Intellij IDEA设置忽略部分类编译错误
有些时候我们的项目中有些错误,但这些错误并不影响项目的整体运行(或许是没有使用到),默认情况下idea是无法通过编译的,因此也就无法部署运行,要达到正确运行项目的目的需要作一些设置才行. 设置Inte ...
- SFINAE and enable_if
There's an interesting issue one has to consider when mixing function overloading with templates in ...
- @spoj - ADAMOLD@ Ada and Mold
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个长度为 N 的序列 A,将其划分成 K + 1 段,划分 ...
- Codeforces 432C
题目链接 题意: 给出一个长度为n(n<=10^5)的数组a, 数组a是数字1到n的一种排列(打乱顺序). 每次可以选择两个数(不同)进行交换, 但是交换的条件是被选择的两个数的下标之差加1应 ...
- jQuery第3天
复习 如何区别 JS DOM对象和 JQ 包装对象? JQ对象其实是经过包装的DOM对象,包装后可调用 JQ 的方法. JS 对象基本上都是属性为主,JQ基本上都方法为主. 可通过 console.d ...
- Java练习 SDUT-3268_飞花的糖果
飞花的糖果 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 一日,飞花壕大手一挥,买了N个的两两不相同糖果,他想要拿出M ...
- JavaScript 错误
try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. JavaScript 错误 当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错 ...
- DRDS 数据恢复重磅发布,全方位保障您的数据安全
背景介绍 数据库存储着企业的核心数据,在企业中占据非常重要的位置,一旦出现SQL注入,数据误删的情况,影响的不仅仅是业务,还会泄露用户的个人信息.因此,数据库的数据安全问题十分重要. 当数据库迁移到云 ...