公司业务要求不同根节点配置显示与否复选框,官方文档没有这样的配置,所以想到了修改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. 带三角形下标的提示框(按钮button)

    HTML:<div class="leaflet-popup-content-wrapper"> <div class="leaflet-popup-c ...

  3. 【JZOJ3873】【NOIP2014八校联考第4场第2试10.20】乐曲创作(music)

    ujfuiaty 小可可是音乐学院的一名学生,他需要经常创作乐曲完成老师布置的作业. 可是,小可可是一个懒惰的学生.所以,每次完成作业时,他不会重新创作一首新的乐曲,而是去修改上一次创作过的乐曲作为作 ...

  4. 【OI】拓扑排序

    拓扑排序 首先要求图为DAG 算法:首先将度为1的节点加入队列每次取出队首点u,在图中删去和u相邻的边继续将度数为1的点加入队列 到了最后, 如果没有度数为1的点,则图不是DAG 通过拓扑排序可以给D ...

  5. jquery全屏图片滑动切换

    在线演示 本地下载

  6. 外贸电子商务网站之Prestashop 语言包安装

    prestashop添加语言-下载语言包 我们找到中文简体(Chinese-Simplified)一行,点击最后一栏的下载(Download)按钮,我们点击下载,可以下到一个以语言的 ISO为文件名, ...

  7. 网络流24题 负载平衡(DCOJ8013)

    题目描述 G 公司有 n nn 个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使 n nn 个仓库的库存数量相同.搬运货物时,只能在相邻的仓库之间搬运. 输入格式 文件 ...

  8. hdu 3466 01背包变形【背包dp】

    http://acm.hdu.edu.cn/showproblem.php?pid=3466 有两个物品P,Q,V分别为 3 5 6, 5 10 5,如果先dp第一个再dp第二个,背包容量至少要为3+ ...

  9. 开发者说:Sentinel 流控功能在 SpringMVC/SpringBoot 上的实践

    从用户的视角来感受一个开源项目的成长,是我们推出「开发者说」专栏的初衷,即在开发者进行开源项目选型时,提供更为立体的项目信息.专栏所有内容均来自作者原创/投稿,本文是「开发者说」的第6篇,作者 Jas ...

  10. Oracle包utl_inaddr

    作用:用于取得局域网或Internet环境中的主机名和IP地址. 1.utl_inaddr.get_host_address 环境中IP地址 如果查询失败,则提示系统错误 查询www.qq.com的I ...