Element-ui el-tree 父节点不显示复选框 子节点显示复选框

最新推荐文章于 2024-08-07 15:40:47 发布
最新推荐文章于 2024-08-07 15:40:47 发布
阅读量7.4k 收藏 24
点赞数 10
分类专栏： Js 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44100313/article/details/112250361
版权
博客介绍了如何在Element-ui的el-tree组件中实现父节点不显示复选框而子节点显示的配置，通过添加特定的CSS样式达成目标。内容包括需求说明、改后效果展示以及关键代码片段。
摘要由CSDN通过智能技术生成
需求：父节点不显示复选框 子节点显示复选框
一 . 父节点不显示复选框 子节点显示复选框(如图)

在这里插入图片描述

二 . 改后效果(如图)

在这里插入图片描述

三 . 上代码(如图)

添加css样式

.el-tree .el-tree-node .is-leaf + .el-checkbox .el-che
最低0.47元/天 解锁文章
鱼一直下m
关注
专栏目录
vue element-ui ztree，ztree父节点不显示复选框，而只有子节点显示。后台传json数据不写"nocheck":true
qq_19808621的博客
05-07 5467
vue + element-ui （el-popover）+ ztree <el-form-item label="处理部门"> <el-input v-popover:processing v-model="linkDispatchName"></el-input> <el-popover ref="processing" p...
el-tree，父节点的复选框不显示
timoingff的博客
06-29 1281
el-tree对父节点的选择框禁用。
vue-treeselect 禁止父级选中,不禁止子集选中
最新发布
weixin_46391404的博客
08-07 261
【代码】vue-treeselect 禁止父级选中,不禁止子集选中。
Debug-005-实现elementui的el-tree组件的一级节点的复选框不显示
LM0916的博客
05-09 1049
这里一共有两个问题：（1）如何生效（2）项目中还有别的组件和页面使用el-tree,这样修改之后，肯定会影响其他地方的使用，怎么处理？这里是通过改样式的方法，在网上参考别的大佬的代码，但其实我还没有深刻理解这段代码的含义，这里肯定要留意一下，再出一期。补充一下这一段知识点的空白，请各位大佬见谅。这里应该涉及到Vue中的深度选择器的相关知识（下面的代码是el-tree的基本结构和一些属性方法（请看备注，这里不再赘述，也可以去。这里我本来的思路其实是参考网上给出的另一种方式，即改源码的方式。
ElementUi tree树指定节点是否显示复选框（父节点不显示复选框）
小太阳的博客
05-11 8630
场景：只有子节点有复选框，父节点没有复选框，如图 打开控制台，发现只有子节点样式名有isleaf 所以修改样式代码 // 不可全选样式 .el-tree-node { .is-leaf + .el-checkbox .el-checkbox__inner { display: inline-block; } .el-checkbox .el-checkbox__inner { display: none; } }
Tree 树形控件一级菜单没有复选框，子菜单有复选框，如何实现？
qq_63322025的博客
06-06 1553
现在的需求则是，A页面使用该组件不希望出现复选框，B页面使用该组件能进行多选，则需要用到复选框，并且根结点没有复选框，不支持选中的情况。第一行代码是当一个节点是叶子节点时，它的后面的复选框会以行内块级元素的方式显示出来。多选时，用的check-change，将每次选择的对象放进数组中，返回给需要的页面。第三行的意思是如果一个节点既是叶子节点又是父节点，它会在树形结构中显示出来。第二行代码是当一个节点不是叶子节点时，它的复选框会被隐藏起来。在父组件中，直接在引用子组件的地方，加上一个属性。
ElementUI tree 所有叶子节点设置显示复选框，父节点不显示
ykmiao的博客
03-11 7560
今天看了一下网上的，基本都是只能显示最后一级节点的复选框，如图： 上面我们看到只能显示最后一级，那要是我要上一级也能显示复选框怎么办，答案很简单，通过代码调试发现 若有子节点的话会有role=“group”,显示知道怎么去控制了吧…先看结果： 修改css颜色即可，先默认都不显示，后根据属性role="group"来选择性显示 #testTree { .el-checkbox .el-ch...
element tree 一级节点不显示复选框
zhangtongxueya的博客
06-24 1077
tree 一级节点不显示复选框
Tree 树形控件 父级不显示复选框并且show-checkbox可以切换单选多选
weixin_47353884的博客
04-10 1497
Tree 树形控件用清晰的层级结构展示信息，可展开或折叠。
element-ui el-tree 设置指定级别节点显示复选框el-checkbox
weixin_43899694的博客
05-13 5748
将一个选择框去掉，变成下图↓ 开始想到 选中第一个el-checkbox 隐藏 .my-tree .el-tree-node__content label.el-checkbox:nth-child(1) { display: none; } 但是这样写无效，选不到 百度到一些大神通过修改elementui源码实现 emm咸鱼不想看 最后想到可以既然不能单独去掉父级的，那就先全部去掉，再给子级的加上↓ .my-tree .el-tree-node__content label.el-checkbo.
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
为了控制树形控件的表现，还可以通过show-checkbox属性添加复选框，node-key来指定节点唯一标识的属性名等。 接下来是render函数的介绍。在Vue.js中，render函数有三个参数：h（或createElement），data以及...
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
扩展主要包括：显示边框、固定高度、显示复选框、复选框选中是否遵循父子关联、复选框禁用条件。 - 这里有一个兄弟组件-树形穿梭框： - 快速上手 npm i @weilan/el-tree-table --save 或 npm i @weilan/el-tree-...
如何让elementui el-tree组件 一级节点 复选框不显示
暂时还没想好博客简介
11-09 3828
如何让elementui el-tree组件 一级节点 复选框不显示
Element-ui中 树形控件（Tree）实现只显示某一层级复选框且单选
明天也要努力的博客
08-31 8658
需求： tree 组件可实现多选，但复选框在树结构中每一层级都有。如果只想某个层级展示复选框且实现单选需要怎么修改呢？ 思路： 原本想通过禁用某些层级的复选框，达到只能某一层数据可选的功能，但是禁用的复选框仍然显示 效果不好。 通过审查元素发现被禁用的复选框加上了特殊 “类名”（ is-disabled ） 。 因此：我们可以先通过处理 tree 数据的某些层级 disabled 为 true，设置被禁用节点的 display 属性来隐藏该层级复选框。 节点单选： 注意：如果要单选，一定要设
antd+vue:tree组件：父级节点禁止选择并不展示选择框——基础积累
yehaocheng520的博客
12-15 2730
antd+vue:tree组件：父级节点禁止选择并不展示选择框——基础积累
el-tree控制节点复选框显示隐藏，一级节点不显示复选框 其他子节点，收起状态不显示复选框，展开状态显示复选框，叶子节点显示复选框
weixin_45753961的博客
07-10 3780
一级节点不显示复选框 其他子节点，收起状态不显示复选框，展开状态显示复选框，叶子节点显示复选框 //一级节点不显示复选框 其他子节点，收起状态不显示复选框，展开状态显示复选框，叶子节点显示复选框 .el-tree-node { .is-leaf + .el-checkbox .el-checkbox__inner { display:flex; } .el-checkbox__input> .el-checkbox__inner { display:none;
elementui el-tree组件 一级节点 复选框不显示
LJJONESEED的博客
05-18 1408
【代码】elementui el-tree组件 一级节点 复选框不显示。
vue+element-ui 树形table 最后一层有复选框
03-31
Vue Element-UI的树形Table组件可以通过设置show-checkbox属性来显示复选框，但是默认情况下只会在非叶子节点上显示复选框，如果需要在最后一层也显示复选框，可以通过以下两种方式实现： 1. 使用slot-scope自定义单元格内容 在template中使用slot-scope自定义单元格内容，通过判断当前行是否为最后一层来显示复选框。 ```html <el-table :data="data" style="width: 100%"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column label="操作"> <template slot-scope="{ row }"> <el-checkbox v-if="isLastLevel(row)" v-model="checkedNodes" :label="row.id"></el-checkbox> </template> </el-table-column> </el-table> ``` 在methods中定义isLastLevel方法来判断当前行是否为最后一层： ```javascript methods: { isLastLevel(row) { return !row.children || row.children.length === 0; } } ``` 2. 使用tree-node-key属性指定叶子节点的key值 在使用树形数据时，可以通过tree-node-key属性指定叶子节点的key值，然后在show-checkbox属性中使用leaf-only来显示所有叶子节点的复选框。 ```html <el-table :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren', id: 'id', label: 'name', key: 'id'}" :tree-node-key="'id'" :show-checkbox="true" :leaf-only="true" style="width: 100%"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column label="操作"> <template slot-scope="{ row }"> <el-checkbox v-model="checkedNodes" :label="row.id"></el-checkbox> </template> </el-table-column> </el-table> ``` 在这种方式下，只需要在template中直接显示复选框即可，不需要判断当前行是否为最后一层。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值