Tree树形控件选中状态

在做分配权限的时候如图选择了父节点的某些子节点,现在父节点是半选中状态,使用this.$refs.tree.getCheckedKeys()只能拿到当前的子节点,子节点全选才能拿到父节点,而后台需要我们把父节点和子节点一起带过去。

解决方法

  // 获取选中的子节点
let checkedKeys = this.$refs.tree.getCheckedKeys();
// 获取选中的父节点
let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
// 合并
let functionIdList = checkedKeys.concat(hafCheckedKeys)
然后再传给后台

这样我们就解决了子节点未全选时拿到父节点id

Tree树形控件回显问题

解决了上一步你会发现回显的时候有问题,后台返回的数据中选有父节点id和子节点id就导致父节点直接全选

解决办法

//  先清空选中状态
this.$refs.tree.setCheckedKeys([])
functionIdList.forEach(i => {
// 根据id 拿到 Tree 组件中的node的所有信息
let node = this.$refs.tree.getNode(i);
// node.isLeaf:判断当前节点是否为子节点
if (node.isLeaf) {
//如果是子节点,就把状态设置成选中
this.$refs.tree.setChecked(node, true);
} else { }
})
//functionIdList是设置选中的数据

原文链接:https://blog.csdn.net/green111111112/article/details/112371860

element ui Tree树形控件获取未全选父节点和子节点id的更多相关文章

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

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

  2. Element ui tree树形控件获取父节点id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  3. vue_elementUI_ tree树形控件 获取选中的父节点ID

    el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...

  4. vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用

    其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...

  5. BootstrapBlazor实战 Tree树形控件使用(2)

    继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,My ...

  6. BootstrapBlazor实战-Tree树形控件使用(1)

    实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/Sql ...

  7. vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

    做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...

  8. ElementUI Tree树形控件renderContent return时报错

    问题描述: 使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下: 问题分析: renderContent函数中需要使用js ...

  9. Element ui 使用 Tree 树形控件

    使用树形控件需要映入 jsx才能运行链接:https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage npm install\ babe ...

  10. vue-element Tree树形控件通过id默认选中

    一.设置 1.给树形控件设置 ref="tree" node-key="id" 2.在获取数据的位置加上 this.$nextTick(() => { t ...

随机推荐

  1. python 猜数字游戏(多版本)

    原始版本 print('------------------你是sb------------------') temp = input("不妨猜一下小甲鱼现在心里想的是哪个数字:" ...

  2. 小tips:postMessage处理iframe跨域通信

    实例 父页面发消息给子页面,子页面接收消息后回复父页面. 父页面代码: <body> 父级页面: <button id="btn">给iframe子页面传递 ...

  3. SpringMVC——SSM整合-异常处理器

    异常处理器 出现异常的常见位置与常见诱因: 框架内部抛出的异常:因使用不合规导致 数据层抛出异常:因外部服务器故障导致(例如:服务器访问超时) 业务层抛出的异常:因业务逻辑书写错误导致(例如:遍历业务 ...

  4. linux、unix软链接注意事项

    前言 在使用linux过程中,经常使用到软链接(类似windows快捷方式): 创建软链接之后,删除时不注意就会出现到问题 先说结论 删除软链接,确实是使用rm进行删除:但是有个小细节必须要特别注意! ...

  5. 10款好用的开源 HarmonyOS 工具库

    大家好,我是 V 哥,今天给大家分享10款好用的 HarmonyOS的工具库,在开发鸿蒙应用时可以用下,好用的工具可以简化代码,让你写出优雅的应用来.废话不多说,马上开整. 1. efTool efT ...

  6. 《Vue.js 设计与实现》读书笔记 - 第14章、内建组件和模块

    第14章.内建组件和模块 14.1 KeepAlive 组件的实现原理 KeepAlive 一词借鉴了 HTTP 协议. KeepAlive 组件可以避免组件被频繁的销毁/重建.本质是缓存管理,再加上 ...

  7. 一生财运三世书财运测算api接口免费版_json格式数据获取

    ‌三世书财运是根据生辰八字推算出的一个人今生的财运状况,它认为人的财运受到前世因果的影响,同时也会受到今生行为的影响.‌这种算命方法起源于佛教的<三世因果经>,据说可以推演一个人的前世.今 ...

  8. USB协议详解第4讲(USB描述符-标准配置描述符)

    1.USB描述符 USB描述符有设备描述符.标准配置描述符.接口描述符.端点描述符.字符串描述符,HID设备有HID描述符.报告描述符和物理描述符.今天主要是学习USB标准配置描述符的组成. 2.标准 ...

  9. linux kernel 中tracing buffer

    Linux内核的tracing buffer是一种用于存储内核跟踪数据的特殊缓冲区.它用于记录内核中发生的事件和活动,以帮助开发人员进行性能分析和故障排查.该缓冲区可以在内核运行时启用,并且可以通过特 ...

  10. 将python文件编译成exe文件

    第一种方法:我们只会生成一个exe文件,因为所有的库文件他都会包含在这个exe文件中 1.安装:pyinstaller pip install pyinstaller 2.使用如下命令编译 pyins ...