iView tree树形控件父节点半选中问题

最新推荐文章于 2024-03-27 15:17:57 发布
最新推荐文章于 2024-03-27 15:17:57 发布
阅读量759 收藏 2
点赞数 2
分类专栏： iView 文章标签： view design 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiazzww/article/details/125800013
版权
在iView的Tree组件中遇到一个父节点在所有子节点未被选中时仍然显示半选中状态的问题。解决这个问题的关键在于`indeterminate`属性，虽然官方文档未明确提及，但可以通过直接使用此属性来改变父节点的状态。通过递归方法检查节点的childrens，动态调整`indeterminate`的布尔值，从而正确显示父节点的选中状态。
摘要由CSDN通过智能技术生成

tree树形控件父节点半选中问题:

        当父节点里的子节点checked都为false时,子节点的选中状态均已取消,但是此时父节点还处于半选中状态(部分子节点选中状态),状态如下:

 解决方法: 关键词 indeterminate

                indeterminate在iView官方文档里没有给出,但是确实存在此属性,我们可以直接使用,

                用法:一般在含有子节点的父节点中改变Boolean值(判断节点是否含有childrens进行改变赋值)(递归方法循环判断)

xiazzww
关注
专栏目录
iview Tree控件，checked 问题：父子节点选中问题
Jiang的博客
12-03 1433
iview Tree控件，权限时checked 问题：父子节点选中问题
tree父节点不被选中和勾选(所以父节点)只选择子节点
weixin_45229383的博客
03-14 4906
这里写自定欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 t = $.fn.z...
iViewTree组件中获取选中项及半选项节点及iView中方法的使用
lys20000913的博客
09-25 3373
以下面方法为例 **在页面中使用ref绑定 **而后在methods中放在一个事件中去触发他打印看一下结果 当前勾选一个。点击确定查看输出 输出结果》》》 ok 结束 ...
【vue】解决iview中父节点半选择问题
loyd3的博客
07-29 906
在实际情况中遇到的问题：角色管理 编辑权限如果只选择子权限，此时父权限是半选择，保存后再去编辑，发现父权限变成选中，且此父权限下的所有子权限都选中，但接口查询出的数据是对的 解决思路，对后端返回的树的数据进行过滤，有子节点的父节点选中状态设置成false 代码如下： <Tree :data="permissions | filterPer" show-checkbox @on-check-change="fixTreeArray" ref="tree" ></Tree> f
element - ui tree树形控件 父级半选状态id和选中子级id一起传给后台, 回显去掉父级半选状态id
weixin_56383764的博客
01-16 1581
element - ui tree树形控件 父节点选中子节点全选 解决方式
(请教)各位大哥, 如何在C#中判断TreeView的结点是否被选中
weixin_30808253的博客
03-17 1035
如题!! 谢谢!!!! 转载于:https://www.cnblogs.com/lgsxp/archive/2006/03/17/351786.html
el-tree子节点取消选中，父节点选中效果不变
Zorephp的博客
08-20 7349
Element UI el-tree子级取消选中，父级选中效果不变
树形多选框，选中/取消父节点子节点全选中/取消，选中一个子节点父节点选中，子节点全取消父节点取消
md_shmily92的专栏
01-26 1194
js代码        function onCheckBoxHander(pId,checked)  {   var cb = $("input[id='"+pId+"'][type='checkbox']").parent().find("input");                cb.each(function(){               if(checked)
vue el-tree 默认展开第一个节点的实现代码
10-15
3. 默认展开节点功能：在树形控件el-tree中，默认展开全部或全部关闭是官方文档中提供的功能。但有时需要自定义默认展开特定的节点，比如本文中提到的默认展开树形结构的第一层第一个节点。 4. default-expanded-...
Vue ElementUI tree组件 动态渲染编辑时 选择父级时会全选所有的子级（el-tree数据回显父节点和子节点都会被选中）
z00001993的博客
04-24 5473
问题描述： 当el-tree 需要从后台拿到数据动态展示出来时，会出现一个父节点下面的所有子节点全部被勾选了，如图： 解决方案： <el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="...
iview 树形加工类
10-16
iview 树形加工类,后台查询list数据，前台加工成iview所需要的树形结构
如何判断TreeView的选中节点
修罗的专栏
04-19 3847
我发现如果在TreeView的单击事件中获取e.Node这个节点不一定选中节点，在网上查了一下用这个方法不知道行不行，周一试一下。     if (e.Button == MouseButtons.Right)//判断你点的是不是右键            {                Point ClickPoint = new Point(e.X, e.Y);             
设置iview tree选中
fk129
10-21 4241
// tree 树数据 //ids 要选中节点的id function filterDeviceTree(tree, ids) { let _tree = JSON.parse(JSON.stringify(tree)) if (ids.length == 0) { return _tree } return _tree.filter((item...
iview树形组件的一些理解和开发
Ceichaos的博客
05-31 529
最近项目中使用了之前没怎么用过的树性控件，也是在好好的重新熟悉了一下这种组件的架构，作为经验，拿出来分享一下，方便以后有小伙伴用到有关树形组件的开发时能做个参考
TreeView的三种状态，全选，全不选，半选中
weixin_30919429的博客
12-18 1405
我知道的设置treeview节点的三种状态，如果不是买的控件，那么通过代码，只能设置两种状态，我知道的有三种方法， 第一种是重写treeview，第二种是把三种状态做成小图标，让节点复选框随着不同的状态，显示不同的图片，第三种是通过重新绘画复选框中的内容实现 截图中的是第三种方法，可能不是很好用，会有一些小问题 代码 运行效果 转载于:https://www.cnblogs.com...
iView Tree根据id组合默认显示选中，解决Tree根据ids选中之后取消再也无法选中问题
weixin_41234837的博客
08-31 3094
1.根据id组合Tree默认选中效果图 2.思路遍历id数组，与树数据对比，找到选中id就设置checked为true，受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除，所以我们要处理这种情况，我们可以使用vm.$set()方法，既可以新增属性,又可以触发视图更新。具体看vue文档； 3.看代码 <template> <div> <Tree:data="data33"show-checkboxmultipleref="tr...
iview tree的坑
最新发布
qq_48881923的博客
03-27 157
记录一下 iview tree的小bugger（官网没有！indeterminate属性，半选的节点也会取消勾选。
iview tree组件修改checked,expand,indeterminate值不渲染的问题
CHH_HE的博客
07-01 1806
在构建最初的tree型数据时我是没有给其赋值check等三个值的，因为想着在获得到tree型数据时再将其赋值进去，所以最一开始树形结构时↓ let obj = { title: '', MENU_ID: '', children: [{ title: '', MENU_ID: '', children: []
Iview Tree组件点击标题展开
郊眠寺
08-05 577
容器的高度自适应table 的高度由数据的条数决定需要让分页器始终处于容器底端。
iview tree控件每次选中，显示选中的id
06-03
好的，针对你的问题，你可以在iview tree控件的on-select事件中获取选中的节点的id并显示。具体代码可以参考以下示例： ```html <template> <div> <Tree :data="data" @on-select="handleSelect"></Tree> <div>选中节点的id为: {{selectedId}}</div> </div> </template> <script> export default { data() { return { data: [ { title: '节点1', id: 1, children: [ { title: '节点1-1', id: 2 }, { title: '节点1-2', id: 3 } ] }, { title: '节点2', id: 4, children: [ { title: '节点2-1', id: 5 }, { title: '节点2-2', id: 6 } ] } ], selectedId: '' } }, methods: { handleSelect(node) { this.selectedId = node.id; } } } </script> ``` 在上面的代码中，我们在iview tree控件的`on-select`事件中获取选中的节点，并将该节点的id赋值给`selectedId`变量。然后我们在页面上显示该变量的值即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值