Part.1 问题

写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限。涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就会全部被选中,这是我们不愿意看到的,可能你会说,取消父子联动属性不就好了,可是我们也需要在子节点被选中时,父节点保持半选中状态。

Part.2 思路

在仔细看完 https://element.eleme.cn/#/zh-CN/component/tree#fang-fa   Element -UI 的官方文档后会发现很关键的两个方法:

现在,我们该怎么进行呢? 先说一下我自己的思路,而后会逐一详解:

步骤:

第一步: 创建一个标识数组

第二步: 将上述两个方法返回的数组与创建的标识数组进行合并,形成一个数组,传递给后台

第三步: 回显时,以自己的标识数组的值为分割点,将后面的值全部删除

详解:

第一步 创建一个标识数组非常简单,如我创建的数组:signCode: [9999]

第二步 三个数组进行合并我的写法如下:

  let empowerTreeFrom = _that.$refs.empowerTreeFrom; //  empowerTreeFrom 为自己为 tree 组件定义的 ref 的值

  empowerTreeFrom.getCheckedKeys().concat(_that.signCode, empowerTreeFrom.getHalfCheckedKeys())  // 数组合并关键方法  concat

第三步 回显时,返回的数据:

接下来,获取整个 idList 数组进行条件分割,我的方法:

let filterId = getIdList.indexOf(_that.signCode[0]);  // 获取 标识数组元素 当前索引
getIdList.splice(filterId, getIdList.length - filterId); // 利用 splice 方法 从当前索引处开始切割,切割个数为 getIdList.length - filterId
empowerCheckedKeys = getIdList // 根据 getIdList 数组的值进行选中

完成!!!

Element UI tree 回显问题的更多相关文章

  1. element ui tree回显 setCheckedNodes,setCheckedKeys,setChecked等函数报undefined问题

    在写项目的时候,需要用到tree组件进行回显来进行权限控制: 在回显过程中使用回显函数会报报undefined, 这时只需要给该函数包裹一层nextTick方法就行了, 在回显过程中我们有可能使用半选 ...

  2. element ui el-tree回显问题及提交问题(当后台返回的el-tree相关数组的时候,子菜单未全部选中,但是只要父级菜单的id在数组中,那么他的子菜单为全部选中状态)

    1:问题原因:我们可能使用 this.$refs.tree.setCheckedKeys(this.defalutArr);或者使用:default-expanded-keys="treeD ...

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

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

  4. react项目中element的DatePicker回显

    element的DatePicker获取value的时候是日期对象如下,可以提交的时候查看参数 2019-06-30T17:02:02.000Z  如果是console.log打印出来的话,是这样的 ...

  5. Element ui tree结合Vue使用遇到的一些问题(一)

    下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...

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

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

  7. vue element upload图片 回显问题

      beforeUpload (file) { var _this = this; var reader = new FileReader(); reader.readAsDataURL(file); ...

  8. element - ui tree

    一行代码两行泪,没有外网真可怕!好久没写博客了,更新一把. <template> <div> <el-tree :data="data" :props ...

  9. Element ui tree 搜索

    搜索框 属性 :filter-node-method="filterNode" 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点 ...

随机推荐

  1. 【202】ThinkPad手势&快捷键

    快捷键: Ctrl + Alt + ↑:正常屏幕Ctrl + Alt + ↓:翻转屏幕Ctrl + Alt + →:向左侧翻转90°Ctrl + Alt + ←:向右侧翻转90° 首先看下 Esc 键 ...

  2. Linear Regression_最小二乘(LMS)

    %% Machine Learining----Linear Regression close all clear %%data load Year = linspace(,,); Price = [ ...

  3. (二十七)分类信息的curd-分类信息修改

      修改分类步骤分析: 1.在list.jsp页面上点击修改(编辑) /store/adminCategory?method=getById&cid=??? 2.在getById方法中 获取c ...

  4. 任务31:课时介绍 & 任务32:Cookie-based认证介绍 &任务33:34课 :AccountController复制过来没有移除[Authorize]标签

    任务31:课时介绍 cookie-based网站这边的认证 jwt基于移动端和前后端分离的项目,jwt有一些独特的优势 jwt在asp.net core中的实现机制,了解实现机制并进行扩展.比如非标准 ...

  5. HDU 5881 Tea (模拟)

    题意:有一壶水, 体积在 LLL 和 RRR 之间, 有两个杯子, 你要把水倒到两个杯子里面, 使得杯子水体积几乎相同(体积的差值小于等于1), 并且使得壶里剩下水体积不大于1. 你无法测量壶里剩下水 ...

  6. Android应用开发基础篇(12)-----Socket通信(转载)

    转自:http://www.devdiv.com/android_socket_-blog-258060-10594.html 一.概述 网络通信无论在手机还是其他设备上都应用得非常广泛,因此掌握网络 ...

  7. (水题)洛谷 - P1603 - 斯诺登的密码

    https://www.luogu.org/problemnew/show/P1603 有毒,大小写不检测,句号也不管. #include<bits/stdc++.h> using nam ...

  8. 浅谈字符串哈希 By cellur925

    前言 蒟蒻最近在复习字符串算法...但正如之前所说,我OI太菜被关起来了,本蒟蒻只能从最简单的哈希入手了TAT.而别的dalao都在学习AC自动机/后缀数组等高到不知哪里去的算法qwq. 基本思想 映 ...

  9. poj2893 M*N puzzle 【n*m数码问题小结】By cellur925

    题目传送门 这个问题是来源于lydrainbowcat老师书上讲排序的一个扩展.当时讲的是奇数码问题,其实这种问题有两种问法:一种局面能否到另一种局面.到达目标局面的最小步数. 本文部分内容引用于ly ...

  10. Unity插值函数Lerp()与增量时间Time.deltatime

    一.Unity插值函数Lerp() 通过官方文档简单了解插值函数(https://docs.unity3d.com/ScriptReference/index.html),可以看到插值函数有很多 Ma ...