公司业务要求不同根节点配置显示与否复选框,官方文档没有这样的配置,所以想到了修改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 根据不同叶子节点设置是否显示复选框的更多相关文章

  1. DOM(十)使用DOM设置单选按钮、复选框、下拉菜单

    1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...

  2. ElementUi tree 指定节点是否显示复选框

    场景:树的内容是省份下面的城市有酒店 需求:只能多选酒店(为了删除它们),至于为啥不能选省份或者城市更加灵活的去删除相应酒店,这你得去问后台0.0,他只弄了根据酒店id去删除.嗯,连创建酒店的时候级联 ...

  3. Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置

    QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有m ...

  4. 【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

    0.页面中准备树的ul <ul id="treeDemo10" class="ztree" style="display: none;" ...

  5. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  6. 判断easyUI tree 节点复选框是否被选中的方法。将选中的节点高亮显示的方法

    在datagrid tree中如何判断某个节点的复选框是否被选中? 我们可以通过HTML结构去分析: 1.节点未选中前 2.节点选中后 所以节点被选中前和选中后,html中的class类是用区分的. ...

  7. 关于textjs的tree带复选框的树

    通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js ...

  8. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  9. php部分--例子:租房子(复选框的全选、数组拼接成字符串、设置复选框的name值、)

    1.链接数据库 <?php include("DBDA.class.php"); $db=new DBDA(); $sql="select * from fangz ...

随机推荐

  1. PHP学习(函数)

    可变函数,即通过变量的值来调用函数,因为变量的值是可变的,所以可以通过改变一个变量的值来实现调用不同的函数. 经常会用在回调函数.函数列表,或者根据动态参数来调用不同的函数.可变函数的调用方法为变量名 ...

  2. Python接口自动化(一)接口基础

    HTTP接口熟悉 常见接口介绍 接口工具的使用 fiddler如何mock数据 常见接口基础面试 如何理解接口?前后端解耦,前端和后端数据对接桥梁 接口测试和功能测试区别在哪?接口测试是功能测试的一种 ...

  3. 【JZOJ4924】【NOIP2017提高组模拟12.17】向再见说再见

    题目描述 数据范围 =w= 设h[i]表示,甲队得到i分的方案数. 那么h[(n+k)/2]和h[(n−k)/2]就是答案. 设g[i]表示,甲队得到至少i分的方案数. 那么h[i]=g[i]−∑j& ...

  4. 【JZOJ4359】【GDKOI2016】魔卡少女

    题目描述 君君是中山大学的四年级学生.有一天在家不小心开启了放置在爸爸书房中的一本古书.于是,君君把放在书中最上面的一张牌拿出来观摩了一下,突然掀起一阵大风把书中的其她所有牌吹散到各地.这时一只看上去 ...

  5. Directx11学习笔记【九】 3D渲染管线

    原文:Directx11学习笔记[九] 3D渲染管线 原文地址:http://blog.csdn.net/bonchoix/article/details/8298116 3D图形学研究的基本内容,即 ...

  6. HDU-1024_Max Sum Plus Plus

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) P ...

  7. html+js 在页面同步服务器时间

    将以下的代码  放置html页面中! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. Uva 10446【递推,dp】

    UVa 10446 求(n,bcak)递归次数.自己推出来了一个式子: 其实就是这个式子,但是不知道该怎么写,怕递归写法超时.其实直接递推就好,边界条件易得C(0,back)=1.C(1,back)= ...

  9. Jmeter非命令行执行脚本

    这次我们可以清晰地看到每个线程的执行情况.        这里是我们使用非 GUI 模式运行测试脚本时可以使用的一些命令: -h 帮助 -> 打印出有用的信息并退出 -n 非 GUI 模式 -& ...

  10. 【算法】BSGS算法

    BSGS算法 BSGS算法用于求解关于x的模方程\(A^x\equiv B\mod P\)(P为质数),相当于求模意义下的对数. 思想: 由费马小定理,\(A^{p-1}\equiv 1\mod P\ ...