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. 把dataframe 一列转成 array

    把dataframe 一列转成 array

  2. JS的可选链操作符(?.)与双问号(??),你用到了吗?

    可选链操作符(?.) 以前一般这样使用: let nestedProp = obj.first && obj.first.second; 或者这样: let temp = obj.fi ...

  3. 低代码 + BI 数字化转型如何助力制造业供应链协同?

    引言 在当今快速变化的商业环境中,制造业面临着前所未有的挑战和机遇.全球化竞争.消费者需求的快速变化.技术创新的加速以及不断增加的成本压力,都要求制造企业不断提高其供应链的效率和灵活性.供应链协同作为 ...

  4. Maven 依赖项管理&&依赖范围

    依赖管理   使用坐标导入jar包     1.在pom.xml 中编写 <dependencies> 标签     2.在 <dependencies> 标签中使用 < ...

  5. [python] 基于PyOD库实现数据异常检测

    PyOD是一个全面且易于使用的Python库,专门用于检测多变量数据中的异常点或离群点.异常点是指那些与大多数数据点显著不同的数据,它们可能表示错误.噪声或潜在的有趣现象.无论是处理小规模项目还是大型 ...

  6. 多款国产操作系统安装数据库干货文档汇总(含Oracle/MySQL/国产数据库等)

    随着国产化的逐步推进,越来越多的企业选择将数据库安装在国产操作系统上.为帮助大家了解国产操作系统上的数据库成功搭建案例与搭建方式,本文整理了墨天轮数据技术社区上用户分享的实操文档,涵盖银河麒麟.中标麒 ...

  7. 使用datagrip时,报错 connection refused

    因为数据库没有开启 : 打开终端 输入(管理员身份): net start mysql80   (这是你的数据库的名字)

  8. KubeSphere 宣布开源 Thanos 的企业级发行版 Whizard

    日前,青云科技宣布开源 Thanos 的企业级发行版 Whizard,为企业带来真正高可用.可扩展.可存储与查询海量监控数据.易运维.安全的 Prometheus 长期存储方案. Prometheus ...

  9. 快来考试拿证书!KubeSphere 个人技能专业考试认证上线啦!

    以容器技术和容器编排为基础的云原生应用,被越来越多的企业用户接受和使用,并且在生产环境中使用容器技术的比例逐年增加.Kubernetes 无疑已经成为容器编排的事实基础,而依托于 Kubernetes ...

  10. FFmpeg开发笔记(五十八)把32位采样的MP3转换为16位的PCM音频

    ​<FFmpeg开发实战:从零基础到短视频上线>一书的"5.1.2  把音频流保存为PCM文件"介绍了如何把媒体文件中的音频流转存为原始的PCM音频,在样例代码的转存过 ...