el-tree 所有父节点不显示复选框，子节点设置显示

原创 于 2024-12-06 20:30:10 发布 · 340 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端 

添加css样式
.el-tree-node {
  .is-leaf + .el-checkbox .el-checkbox__inner {
    display: inline-block;
  }
  .el-checkbox .el-checkbox__inner {
    display: none;
  }
}

Light_10
关注
Element-ui el-tree 父节点不显示复选框 子节点显示复选框
weixin_44100313的博客
01-05 7920
需求：父节点不显示复选框 子节点显示复选框 一 . 父节点不显示复选框 子节点显示复选框(如图) 二 . 改后效果(如图) 三 . 上代码(如图) 添加css样式 .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner{display: inline-block;} .el-tree .el-tree-node .el-checkbox .el-checkbox__inner{display: none;} 希望对你有用!
ElementUi tree树指定节点是否显示复选框（父节点不显示复选框）
小太阳的博客
05-11 9206
场景：只有子节点有复选框，父节点没有复选框，如图 打开控制台，发现只有子节点样式名有isleaf 所以修改样式代码 // 不可全选样式 .el-tree-node { .is-leaf + .el-checkbox .el-checkbox__inner { display: inline-block; } .el-checkbox .el-checkbox__inner { display: none; } }
[element-ui] el-tree 所有叶子节点设置显示复选框，父节点不显示
qq_14993591的博客
03-22 238
【代码】[element-ui] el-tree 所有叶子节点设置显示复选框，父节点不显示。
elementui el-tree组件 一级节点 复选框不显示
LJJONESEED的博客
05-18 1736
【代码】elementui el-tree组件 一级节点 复选框不显示。
Debug-005-实现elementui的el-tree组件的一级节点的复选框不显示
LM0916的博客
05-09 1736
这里一共有两个问题：（1）如何生效（2）项目中还有别的组件和页面使用el-tree,这样修改之后，肯定会影响其他地方的使用，怎么处理？这里是通过改样式的方法，在网上参考别的大佬的代码，但其实我还没有深刻理解这段代码的含义，这里肯定要留意一下，再出一期。补充一下这一段知识点的空白，请各位大佬见谅。这里应该涉及到Vue中的深度选择器的相关知识（下面的代码是el-tree的基本结构和一些属性方法（请看备注，这里不再赘述，也可以去。这里我本来的思路其实是参考网上给出的另一种方式，即改源码的方式。
el-tree，父节点的复选框不显示
timoingff的博客
06-29 1663
el-tree对父节点的选择框禁用。
el-tree控制节点复选框显示隐藏，一级节点不显示复选框 其他子节点，收起状态不显示复选框，展开状态显示复选框，叶子节点显示复选框
weixin_45753961的博客
07-10 4115
一级节点不显示复选框 其他子节点，收起状态不显示复选框，展开状态显示复选框，叶子节点显示复选框 //一级节点不显示复选框 其他子节点，收起状态不显示复选框，展开状态显示复选框，叶子节点显示复选框 .el-tree-node { .is-leaf + .el-checkbox .el-checkbox__inner { display:flex; } .el-checkbox__input> .el-checkbox__inner { display:none;
【JavaScript源代码】element的el-tree多选树(复选框)父子节点关联不关联.docx
12-28
在el-tree中，如果需要实现多选（复选框）功能，我们可以利用`show-checkbox`属性来开启复选框。在处理父子节点之间的关联性时，`check-strictly`属性扮演着关键角色。 `check-strictly`属性决定了父子节点之间是否...
ElementUI中el-tree节点的操作的实现
10-15
`el-tree`组件接收`data`属性，这是树形结构的数据源，`props`用于指定子节点和节点标签的属性名，`@node-click`监听节点点击事件，`show-checkbox`为节点添加复选框，`node-key`用于唯一标识每个节点，`check-...
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
10-18
// 此设置控制级联是否影响被禁用的复选框 cascade_to_disabled: false, cascade_to_hidden: true }; $('#data').jstree({ 'core': { 'data': [ {"text":"Rootnode","children":[ {"text":"Childnode1",...
element tree 一级节点不显示复选框
zhangtongxueya的博客
06-24 1191
tree 一级节点不显示复选框
el-tree 树增加全选按钮、点击文字时选中多选框
qq_28586135的博客
11-14 7288
el-tree 树增加全选按钮、点击文字时选中多选框
element树形图没有复选框怎么显示高亮
九亿宅男的梦的博客
11-17 351
关于elementi el-tree 无复选框获取当前选中id及手动选中高亮
element-ui的el-tree使用-懒加载状态下el-tree的叶子节点才显示多选框，父节点则隐藏多选框
兔子的博客
04-23 1523
项目要求：多选树得叶子节点数据。
el-cascader回显只选中不显示的问题
mkbird的博客
06-30 4416
先看代码 因为el-cascader的v-model绑定的必须是数组所以在我点击对应页面发起请求的时候，将需要的值push到cityCascader中 此时就会出现标题的问题，我的cityCascader的数据是符合要求的，但是级联选择框没有默认数据，只有默认选中解决方法是，不使用数组的push方法，而是直接重新赋值 此时就可以默认显示啦...
更改element-ui源码，控制tree组件每行是否显示选择框
Rome_z的博客
04-20 1228
修改源码的步骤： 1.github上下载element-ui源码 2.npm i下载依赖项。此处非常容易出错，和node的版本有关。本次主要是node-sass下载出错。使用的node是12版本，下载的node-sass是4.10版本。改成npm i node-sass@4.12单独下载node-sass后解决 3.修改源码。此次修改了elementui源代码tree/src/tree-node.vue 4.npm run dist，生成lib文件夹。 5.使用lib文件夹替换原项目.
1. el-tree树的全部展开(折叠)，全选(全不选)，父子联动
qq_51644044的博客
03-26 4279
【代码】el-tree树的全部展开(折叠)，全选(全不选)，父子联动。
控制element-ui中tree的checkbox是否显示
qq_30351747的博客
02-10 3499
控制element-ui中tree的checkbox是否显示 描述 el-tree使用复选框，需求是叶子节点不加复选框，只有子节点加复选框 查了n久，乱七八糟的。 注意 isLeaf方法 使用isLeaf方法来控制是否显示，这里得注意，要使用isLeaf必须得使用懒加载才行。 项目需求不是懒加载，所以这个方法不行 改elmentui源码 这个方法可以，而且很简单就可以实现 在使用element-ui中tree的checkbox时，有时需要根据节点的属性来决定是否在节点前显示checkbox选择框，因此需要
element ui的el-tree多选树(复选框)父子节点关联不关联的问题
热门推荐
Beam
02-21 3万+
属性check-strictly 官方文档提供属性check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。 而此属性的意思是： 默认false，父子关联。有如下现象及问题： 1、当你通过函数设置勾选节点的时候，只要父节点被勾选子节点必会勾选上，即便设置勾选的list中无此子节点。 2、当你点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父...
el-tree的复选框只能单选且只有子节点显示复选框
最新发布
09-15
实现 el-tree 复选框只能单选且只有子节点显示复选框，可以结合 el-tree 属性的控制和 JS 代码来达成。以下为实现步骤和示例代码： ### 关键配置 - `:data`：树形结构的数据。 - `show-checkbox`：显示复选框。 - `ref`：用于通过 `this.$refs` 拿到此控件。 - `node-key`：给节点的编号，树形数据结构中需有该字段。 - `check-strictly`：父、子节点之间没有关联，不写该属性，选了父节点会默认选择全部子节点。 - `@check`：复选框选择、取消选择时触发的事件。 ### 代码示例 ```vue <template> <el-tree :data="groupTreeData" show-checkbox ref="DeviceGroupTree" node-key="id" check-strictly @check="checkGroupNode" > <template #default="{ node, data }"> <!-- 只在子节点显示复选框 --> <span v-if="!node.childNodes.length"> <el-checkbox v-model="node.checked" @change="handleCheckboxChange(data)"></el-checkbox> {{ data.label }} </span> <span v-else>{{ data.label }}</span> </template> </el-tree> </template> <script> export default { data() { return { groupTreeData: [ { "id": 3, "label": "西大门", "disabled": false, "children": [ { "id": 125, "label": "2单元", "disabled": false, "children": [ { "id": 130, "label": "2001", "disabled": false, "children": [] }, { "id": 131, "label": "2002", "disabled": false, "children": [] }, { "id": 132, "label": "2003", "disabled": false, "children": [] } ] } ] } ] }; }, methods: { checkGroupNode(a, b) { if (b.checkedKeys.length > 0) { this.$refs.DeviceGroupTree.setCheckedKeys([a.id]); } }, handleCheckboxChange(data) { this.$refs.DeviceGroupTree.setCheckedKeys([data.id]); } } }; </script> ``` ### 代码解释 1. **模板部分**：借助 `#default` 插槽，仅在子节点显示复选框。若节点无子节点，就显示复选框；反之，则只显示节点标签。 2. **数据部分**：`groupTreeData` 为树形结构的数据。 3. **方法部分**： - `checkGroupNode`：当复选框状态改变时触发，保证仅选中一个节点。 - `handleCheckboxChange`：手动点击子节点复选框时触发，确保仅选中当前节点。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值