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. LaTeX 几种中文字体的比较

    根据自己的喜好给常见的几个中文字体的打分: 字体选项 字体名 得分 adobe Adobe 宋体 Std 5 fandol FandolSong 0 founder 方正书宋_GBK 10 hanyi ...

  2. Go语言目前主要有哪些应用框架

    Go语言是一种高效.快速.简洁的编程语言,近年来越来越受到开发者的欢迎.由于Go语言的快速发展,出现了很多的优秀框架来支持Go应用程序的开发.以下是一些目前比较流行的Go语言框架: 1. Gin:Gi ...

  3. 推荐一款流量录制回放工具:jvm-sandbox-repeater

    在软件开发和测试过程中,我们经常会遇到需要对网络请求进行录制和回放的需求,以便进行调试.测试和分析.为了模拟真实的用户请求,我们通常会使用各种流量录制回放工具来记录并重放网络请求. 其中,jvm-sa ...

  4. YAML编写应用的资源清单文件(十五)

    上面我们在 Kubernetes 中部署了我们的第一个容器化应用,我们了解到要部署应用最重要的就是编写应用的资源清单文件.那么如何编写资源清单文件呢?日常使用的时候我们都是使用 YAML 文件来编写, ...

  5. 《Neo4j 图数据库扩展指南:APOC和ALGO》

    https://detail.tmall.com/item.htm?spm=a2e2i.11532906.0.d2960ced2.f27a6abbrEMtHp&id=622478213458 ...

  6. 《Vue.js 设计与实现》读书笔记 - 第8章、挂载与更新

    第8章.挂载与更新 8.1 挂载子节点和元素的属性 扩展子元素的类型可以为数组,并判断如果是数组的话,就先依次挂载所有的子元素. 同时新增节点属性.属性可以通过 el.setAttribute 添加到 ...

  7. webapi action 参数

    使用地址参数传递(queryString)数据:eg:http://localhost:5063/WeatherForecast?age=123 /// <summary> /// GET ...

  8. 1. react项目【前端】+C#【后端】从0到1

    1.创建前端基础框架 1.1 前端创建 软件: 1.1.1 npx create-react-app pc ps:pc 是文件名 : 1.1.2 npm start 启动项目 2.创建后端基础框架 软 ...

  9. 3. 用过Konva吗,用过他的api吗

    基础:使用konva,首先需要创建舞台也就是stage,然后创建一个Layer图层,将图层放到舞台上,将图形等内容放到图层上 ; 第一步:创建一个Stage舞台  , 就是创建一个 stage 实例 ...

  10. es6有哪些新特性?

    1. let 和 ocnst ,可以定义块级作用域 2. 新增了箭头函数,箭头函数简化了函数定义的定义 3.新增了promise解决回调地狱问题 ps:回调地狱是我们异步请求服务器数据时,通过then ...