Element UI 使用Tree组件设置节点勾选问题

2023-11-11

Element UI 使用Tree组件设置节点勾选问题

问题分析

	1.设置:tree复选框 check-strictly = false(默认) 父子关联:
		选中父级,勾选所有子选项;取消父级选中,同时取消子选项勾选
		选中子选项,父选项变为半选中状态,如果勾选所有子选项,父选项为选中状态
	2.设置:tree复选框  check-strictly = true 父子无关联,出现:
		父级的选中和取消选中,都不会对子选项的状态有任何的影响
		子选项的选中和取消,都不会对父选项的状态有任何的影响

当默认1问题时, 后端发过来是 父节点id时候会联动选中下面的所有子节点问题?我们只需要发来的子节点id勾选父节点自动联动,不使用父节点id设置勾选

解决方案

通过后端发过来勾选id数组去循环遍历通过id获取当前节点 判断当前节点是否是子节点 如果是子节点就 勾选 , 否则,不勾选

<el-tree :data="data" ref="menuTree" :checkStrictly="checkStrictly"  node-key="id" />
  data: [
        {
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 3,
              label: '2-1-1'
            },
            {
              id: 5,
              label: '2-1-2'
            }
          ]
        }
      ]
  重点这段代码解决
 [2, 9].forEach((item, index) => {
   const node = this.$refs.menuTree.getNode(item)
    console.log(node)
    if (node.isLeaf) {
      this.$refs.menuTree.setChecked(node, true)
    }
  })
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Element UI 使用Tree组件设置节点勾选问题 的相关文章

随机推荐

  • centos7 pip2升级失败解决方法

    centos7 默认python版本是2 7 所以安装的pip也要支持py2 yum install python2 pip y 安装之后默认版本较低 pip 8 1 2 在提示升级时 可能会遇到我这种错误 pip install upgr
  • ssh+vscode remote显示x11

    本教程环境为 windows主机上安装vscode远程连接ubuntu linux服务器做开发 在vscode里面添加ssh主机即可实现远程开发 在服务器上需要安装相应的扩展 实现方法如下 step1 本地windows安装上x11显示软件
  • vue uniapp等动态添加类名

    1 对象形式 p 对象的形式 文字的颜色 p 2 对象形式 p 对象的形式 文字的颜色 p 3 三元表达式 p 三元表示式 文字的颜色 p 4 数组形式 p 数组的形式 文字的颜色 p 5 数组对象形式 p 数组中使用对象 文字的颜色 p
  • VSCode 搭建 STM32开发环境

    首先附上一张VS Code图 一直都喜欢这种 黑色主题感觉高大上 因为公司准备上市 所以不能使用Keil开发了 在这之前有在Linux上开发过STM32 于是想着在Windows上也搭建一个 这样方便跨平台 于是决定搭建一个用VSCode
  • 让你能进“大厂”的数据分析项目是长怎样?全套路线(建议收藏)

    算法 数据结构 全套路线 建议收藏 前言 所谓活到老 学到老 虽然我感觉自己已经学了很多算法了 但是昨天熬夜整理完以后发现 自己还是个弟弟 实在忍不住了 打算把 算法学习路线 发出来 我把整个算法学习的阶段总结成了五个步骤 分别为 基础语法
  • NLP模型笔记2022-09:hanlp所有预训练模型API接口使用

    目录 1 找出所有预训练模型 为后续训练模型准备 2 如何使用上述模型 2 1 以分词模型为案例 2 2 以分词 词性 实体识别 句法模型为统一的模型 参考文献 HanLP2 1支持包括简繁中英日俄法德在内的104种语言上的10种联合任务
  • Python安装报错:”ModuleNotFoundError:No module named _ctypes“ 的解决方案

    目录 第一步 下载安装包 第二步 执行安装 1 创建存放目录 2 运行脚本configure 3 make编译make install安装 4 最后运行make clean 第三步 创建软连接 总结安装过程 总结报错解决 第一步 下载安装包
  • 串口助手使用16进制发送数据

    目录 如何使用串口助手发送16进制数据 注意发送字节 连续发送 注意不要使用回车 如何使用串口助手发送16进制数据 错误示范 正确示范 注意发送字节 有些串口在16进制发送是必须这样 02 直接输入2发送不出去 如图 如何知道没有发送成功呢
  • MFC多线程各种线程用法 .

    一 问题的提出 编写一个耗时的单线程程序 新建一个基于对话框的应用程序SingleThread 在主对话框IDD SINGLETHREAD DIALOG添加一个按钮 ID为 IDC SLEEP SIX SECOND 标题为 延时6秒 添加按
  • Windows 7 下Maven的下载安装配置 (配置本地仓库及修改路径)

    环境 windows 7 64位 官网下载Maven 1 首先去官网 http maven apache org 进行下载 这里尽量不要选太高级的版本 选个稳定的版本就可以了 上面的两个箭头都可以进行选择 第一个箭头是代表最新的版本 这里我
  • 主存储器空间的分配和回收(原理及实现)

    内容 主存储器空间的分配和回收 目的 一个好的计算机系统不仅要有一个足够容量的 存取速度高的 稳定可靠的主存储器 而且要能合理地分配和使用这些存储空间 当用户提出申请存储器空间时 存储管理必须根据申请者的要求 按一定的策略分析主存空间的使用
  • 关于人脸识别的最全研究!

    来源 北京物联网智能技术应用协会 本文内容涵盖人脸识别发展历程 市场研究 核心技术 商业应用以及产业落地 个人看法等干货研究 注意 本文干货满满 约有2万7千字 强烈建议大家先收藏后学习 01 发展史 1 人脸识别的理解 人脸识别 Face
  • 面对多个offer,如何做选择?

    翻看了求职板块的很多内容 发现有很多应届毕业生面临着一个共性的问题 那就是同时面临多个offer时 该怎么选择 也是很纠结的一个问题 从一个生涯规划师的角度并结合个案咨询中的类似案例 提供几个视角 供有选择困惑的求职者做一些参考 希望对你们
  • G. Counting Graphs(并查集)

    Problem G Codeforces 给定一个由n个顶点组成的树 树是一个无圈的连通无向图 树的每条边都有它的权重wi 你的任务是计算满足以下四个条件的不同图形的数量 Plain Text 图形没有自环和多重边 图形的边上的权重是整数且
  • 输出三角形

    输入一个数 输出对应层数的三角形 m eval input for i in range 1 m 1 for x in range 1 m 1 i print end for j in range 1 2 i print end print
  • Flask快速入门与进阶

    欢迎来到Flask的世界 1 Flask介绍 Flask诞生于2010年 是Armin ronacher 用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架 Flask是一个使用 Python 编写的轻量级 We
  • error while loading shared libraries: libopencv_core.so.2.4: cannot open shared object file: No such

    如何解决error while loading shared libraries libopencv core so 2 4 cannot open shared object file No such file or directory
  • Python3.6下安装opencv

    opencv安装问题 1 首先你要有个python 安装Python环境后 推荐使用Anaconda 因为我3 6的python版本 在Anaconda环境下装的opencv 2 anaconda下自带有numpy等依赖包 你可以直接 pi
  • 走进Linux(一切皆文件)

    文章目录 悄悄来到Linux 进入Linux 已配置完毕 一切皆文件 常用的命令 根据实例来升级 文件 用户 进程 process 磁盘分区 disk 端口号 其他 悄悄来到Linux 在我们熟悉了Windows的骚操作以后 我们也可以尝试
  • Element UI 使用Tree组件设置节点勾选问题

    Element UI 使用Tree组件设置节点勾选问题 问题分析 1 设置 tree复选框 check strictly false 默认 父子关联 选中父级 勾选所有子选项 取消父级选中 同时取消子选项勾选 选中子选项 父选项变为半选中状