el-tree勾选后退出再打开显示之前已经勾选的

news2024/9/30 7:18:59

官网文档

element-ui官网文档有默认展开和默认选中

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2, 3]"
  :default-checked-keys="[5]"
  :props="defaultProps">
</el-tree>

<script>
  export default {
    data() {
      return {
        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: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

可以看出  :default-checked-keys="[5]"绑定的是一个数组,元素是每个勾选框的id

html:

<el-tree
        ref="tree"
        :data="memberList"
        show-checkbox
        default-expand-all
        node-key="id"
        highlight-current
        :props="defaultProps"
        :filter-node-method="filterNode"
></el-tree>

memberList数据样式为(可以看出根节点多了个teamFlag):

[
    {
        "id": "F92FE4F9C6F95E18E055000000000001",
        "userName": "A班组",
        "memberList": [
            {
                "id": "F92FE4F9C6FA5E18E055000000000001",
                "teamId": "F92FE4F9C6F95E18E055000000000001",
                "userId": "0fbd222725c748299fdc178987569d4b",
                "userName": "小阮",
                "teamType": null
            },
            {
                "id": "F92FE4F9C6FB5E18E055000000000001",
                "teamId": "F92FE4F9C6F95E18E055000000000001",
                "userId": "9d16ac4119064bbe865102494137a3c8",
                "userName": "tw2t",
                "teamType": null
            },
            {
                "id": "F92FE4F9C6FC5E18E055000000000001",
                "teamId": "F92FE4F9C6F95E18E055000000000001",
                "userId": "d55760ebd5c04f2c869ab084be6f4e6b",
                "userName": "tw2leader",
                "teamType": null
            },
            {
                "id": "F92FE4F9C6FD5E18E055000000000001",
                "teamId": "F92FE4F9C6F95E18E055000000000001",
                "userId": "cdf0c8dcf93f4dfc8602ff59e0b8d191",
                "userName": "tw3t",
                "teamType": null
            },
            {
                "id": "F92FE4F9C6FE5E18E055000000000001",
                "teamId": "F92FE4F9C6F95E18E055000000000001",
                "userId": "885d106031784e6caa2f9fcfb3feab32",
                "userName": "TWTWO",
                "teamType": null
            },
            {
                "id": "F92FE4F9C6FF5E18E055000000000001",
                "teamId": "F92FE4F9C6F95E18E055000000000001",
                "userId": "eb0533610a48411aa6124484aef107a1",
                "userName": "tw2",
                "teamType": null
            },
            {
                "id": "F92FE4F9C7005E18E055000000000001",
                "teamId": "F92FE4F9C6F95E18E055000000000001",
                "userId": "0998d44318fa44f3bb033030adcea1d4",
                "userName": "rh",
                "teamType": null
            }
        ],
        "teamFlag": "team"
    },
    {
        "id": "F92FE5D8EB055E14E055000000000001",
        "userName": "B班组",
        "memberList": [
            {
                "id": "F92FE5D8EB065E14E055000000000001",
                "teamId": "F92FE5D8EB055E14E055000000000001",
                "userId": "9eb123238f464b5f9ce2b55d98a7151f",
                "userName": "tw3",
                "teamType": null
            },
            {
                "id": "F92FE5D8EB075E14E055000000000001",
                "teamId": "F92FE5D8EB055E14E055000000000001",
                "userId": "a687747a84b541b9a5dadb6cedbaac60",
                "userName": "tw3s",
                "teamType": null
            },
            {
                "id": "F92FE5D8EB085E14E055000000000001",
                "teamId": "F92FE5D8EB055E14E055000000000001",
                "userId": "7ed742cf308a4e6e876d19c85ab87bc5",
                "userName": "tw2s",
                "teamType": null
            },
            {
                "id": "F92FE5D8EB095E14E055000000000001",
                "teamId": "F92FE5D8EB055E14E055000000000001",
                "userId": "1c4745174b2443bcb0f692b4206dd565",
                "userName": "陈爱国",
                "teamType": null
            },
            {
                "id": "F92FE5D8EB0A5E14E055000000000001",
                "teamId": "F92FE5D8EB055E14E055000000000001",
                "userId": "37a3167e7bf34e7794080cf3580206ea",
                "userName": "tw1",
                "teamType": null
            },
            {
                "id": "F92FE5D8EB0B5E14E055000000000001",
                "teamId": "F92FE5D8EB055E14E055000000000001",
                "userId": "fbbbf36302d444be8a6b3e01cbc761c4",
                "userName": "tw4s",
                "teamType": null
            },
            {
                "id": "F92FE5D8EB0C5E14E055000000000001",
                "teamId": "F92FE5D8EB055E14E055000000000001",
                "userId": "16d7b52ec5c24bde8b0db1ea76f3c2d1",
                "userName": "tw4t",
                "teamType": null
            },
            {
                "id": "F92FE5D8EB0D5E14E055000000000001",
                "teamId": "F92FE5D8EB055E14E055000000000001",
                "userId": "add97170833e4321a90440f9a80ff650",
                "userName": "tw4",
                "teamType": null
            },
            {
                "id": "F92FE5D8EB0E5E14E055000000000001",
                "teamId": "F92FE5D8EB055E14E055000000000001",
                "userId": "584f437636f04ffca8cce346a80c4b17",
                "userName": "tw1leader",
                "teamType": null
            }
        ],
        "teamFlag": "team"
    },
    {
        "id": "F92FE5D8EB0F5E14E055000000000001",
        "userName": "C班组",
        "memberList": [],
        "teamFlag": "team"
    },
    {
        "id": "0B2EE330883E04CCE065000000000001",
        "userName": "D班组",
        "memberList": [
            {
                "id": "0B2EE330883F04CCE065000000000001",
                "teamId": "0B2EE330883E04CCE065000000000001",
                "userId": "52d863f6232f45cf9abbdb483e9349ac",
                "userName": "塔台讲评室",
                "teamType": null
            },
            {
                "id": "0B2EE330884004CCE065000000000001",
                "teamId": "0B2EE330883E04CCE065000000000001",
                "userId": "d35a2f81166b47c5aad011a665863b2a",
                "userName": "塔台",
                "teamType": null
            },
            {
                "id": "0B2EE330884104CCE065000000000001",
                "teamId": "0B2EE330883E04CCE065000000000001",
                "userId": "6f349b9acd0a431ab77797afdc987202",
                "userName": "TWONE",
                "teamType": null
            }
        ],
        "teamFlag": "team"
    }
]

第一次勾选完生成this.checkedMemberList发送给父数组:

this.checkedMemberList数据(把有teamFlag的删除了,就是删除了根节点其实可以不删):

[
    {
        "id": "F92FE4F9C6FA5E18E055000000000001",
        "teamId": "F92FE4F9C6F95E18E055000000000001",
        "userId": "0fbd222725c748299fdc178987569d4b",
        "userName": "小阮",
        "teamType": null
    },
    {
        "id": "F92FE4F9C6FB5E18E055000000000001",
        "teamId": "F92FE4F9C6F95E18E055000000000001",
        "userId": "9d16ac4119064bbe865102494137a3c8",
        "userName": "tw2t",
        "teamType": null
    },
    {
        "id": "F92FE4F9C6FC5E18E055000000000001",
        "teamId": "F92FE4F9C6F95E18E055000000000001",
        "userId": "d55760ebd5c04f2c869ab084be6f4e6b",
        "userName": "tw2leader",
        "teamType": null
    },
    {
        "id": "F92FE4F9C6FD5E18E055000000000001",
        "teamId": "F92FE4F9C6F95E18E055000000000001",
        "userId": "cdf0c8dcf93f4dfc8602ff59e0b8d191",
        "userName": "tw3t",
        "teamType": null
    },
    {
        "id": "F92FE4F9C6FE5E18E055000000000001",
        "teamId": "F92FE4F9C6F95E18E055000000000001",
        "userId": "885d106031784e6caa2f9fcfb3feab32",
        "userName": "TWTWO",
        "teamType": null
    },
    {
        "id": "F92FE4F9C6FF5E18E055000000000001",
        "teamId": "F92FE4F9C6F95E18E055000000000001",
        "userId": "eb0533610a48411aa6124484aef107a1",
        "userName": "tw2",
        "teamType": null
    },
    {
        "id": "F92FE4F9C7005E18E055000000000001",
        "teamId": "F92FE4F9C6F95E18E055000000000001",
        "userId": "0998d44318fa44f3bb033030adcea1d4",
        "userName": "rh",
        "teamType": null
    }
]

在父组件中处理子组件传过去的选择的元素(主要是this.form.selectedMembe):

    //选择参加人员窗口关闭时
    handleMemberDialog(flag, memberList) {
      this.selectMemberVisible = flag;
      this.form.selectedMember = memberList;
      this.form.memberName = memberList
        .map((item) => {
          return item.userName;
        })
        .join(",");
      let arrList = this.form.memberName.split(",");
      this.$set(this.form, "checkboxGroup", arrList);
    },

父组件中对子组件的传递:

子组件处理父组件传递过来的数据(就是获取selectedMember数组的元素的id就够了)

openInit() {
      if (this.selectedMember && this.selectedMember.length > 0) {
        this.$refs.tree.setCheckedKeys(
          this.selectedMember.map((item) => {
            return item.id;
          })
        );
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

          this.selectedMember.map((item) => return item.id })

[
    "F92FE4F9C6FA5E18E055000000000001",
    "F92FE4F9C6FB5E18E055000000000001",
    "F92FE4F9C6FC5E18E055000000000001",
    "F92FE4F9C6FD5E18E055000000000001",
    "F92FE4F9C6FE5E18E055000000000001",
    "F92FE4F9C6FF5E18E055000000000001",
    "F92FE4F9C7005E18E055000000000001"
]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1407288.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

力扣518. 零钱兑换 II

动态规划 思路&#xff1a; 假设 dp[i] 为金额 i 使用零钱的组合数&#xff0c;其可以由其中的一种零钱 coin 和 i - coin 组合&#xff1b; 遍历零钱数组&#xff0c;对每一种零钱 coin 进行如下操作&#xff1a; 从 coin 到 amount 金额进行遍历&#xff0c;dp[j] dp[j] d…

Prometheus 薪资翻倍的监控系统?

1. 介绍与架构 Prometheus是一个开源的系统监控和警报工具包&#xff0c;用于收集和存储时间序列数据&#xff0c;包括指标信息、记录时间戳以及可选的键值对标签。许多公司使用Prometheus监控K8s集群。 2. 合适与不合适场景 合适场景 Prometheus适用于记录各种数字时间序列…

web系统架构基于springCloud的各技术栈

博主目前开发的web系统架构是基于springCloud的一套微服务架构。 使用的技术栈&#xff1a;springbootmysqlclickhousepostgresqlredisrocketMqosseurekabase-gatewayapollodockernginxvue的一套web架构。 一、springboot3.0 特性&#xff1a;Spring Boot 3.0提供了许多新特性…

每日一题——LeetCode1313.解压缩编码列表

这么简单的题目要说的这么复杂 nums里每相邻的两个元素nums[i]、nums[j]为一对&#xff0c;nums[i]表示nums[j]的次数 var decompressRLElist function(nums) {let res[]for(let i0,j1;j<nums.length-1;i2,j2){while(nums[i]--){res.push(nums[j])}}return res }; 消耗时…

代码随想录 Leetcode107. 二叉树的层序遍历 II

题目&#xff1a; 代码&#xff08;首刷自解 2024年1月24日&#xff09;&#xff1a; class Solution { public:vector<vector<int>> levelOrderBottom(TreeNode* root) {vector<vector<int>> res {};if(root nullptr) return res;queue<TreeNode…

第11次修改了可删除可持久保存的前端html备忘录:将样式分离,可以自由秒添加秒删除样式

第11次修改了可删除可持久保存的前端html备忘录&#xff1a;将样式分离&#xff0c;可以自由秒添加秒删除样式 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"…

Cesium for Unity包无法加载

太上老君急急如律⚡令⚡ &#x1f959;关闭UnityHub&#x1f9c0;启动梯子&#x1f96a;cmd 启动UnityHub &#x1f959;关闭UnityHub &#x1f9c0;启动梯子 &#x1f96a;cmd 启动UnityHub 把批处理启动文件&#x1f448;中的exe的路径换成自己的安装目录&#xff01;保存…

使用Electron打包vue文件变成exe应用程序

文章目录 一、下载Electron二、修改下载的Electron项目1.修改index.html文件2.修改main.js文件3.修改package.json文件 三、修改vue项目1.修改vite.config.js文件2.修改.env.production文件3.修改auth.js文件4.修改router下得index.js文件6.修改Navbar.vue文件 四、Electron打包…

ARMv8-AArch64 的异常处理模型详解之异常类型 Exception types

异常类型详解 Exception types 一&#xff0c; 什么是异常二&#xff0c;同步异常&#xff08;synchronous exceptions&#xff09;2.1 无效的指令和陷阱异常&#xff08;Invalid instructions and trap exceptions&#xff09;2.2 内存访问产生的异常2.3 产生异常的指令2.4 调…

Type-c一分二C+L/C+C同时快充数据线方案

一分二快充线是一种具有同时快充功能的线缆&#xff0c;可以实现同时给两个设备充电&#xff0c;并且都能达到快充的效果。那么&#xff0c;一分二快充线是如何实现同时快充功能的呢&#xff1f; 首先&#xff0c;一分二快充线采用了一种高效能的充电芯片LDR6020&#xff0c;这…

文件上传技术总结

语言可解析的后缀 &#xff08;前提&#xff1a;在Apache httpd.conf 配置文件中有特殊语言的配置 AddHandler application/x-httpd-php .php 搭配大小写、双重、空格来进行 其中&#xff1a; phtml、pht、php3、php4和php5都是Apache和php认可的php程序的文件后缀 常见的…

Web开发4:单元测试

在Web开发中&#xff0c;单元测试是一种重要的开发实践&#xff0c;它可以帮助我们确保代码的质量和可靠性。通过编写和运行单元测试&#xff0c;我们可以验证代码的正确性&#xff0c;减少错误和缺陷&#xff0c;并提高代码的可维护性。本文将介绍单元测试的概念、好处以及如何…

Markdown 数学公式详细总结

✍️作者简介&#xff1a;小北编程&#xff08;专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向&#xff09; &#x1f433;博客主页&#xff1a;开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN &#x1f514;如果文章对您有一定的帮助请&#x1f4…

二分搜索树(Java)

完整代码在最后 树结构&#xff1a; 1.树结构本身是一种天然的组织结构 2.高效 二分搜索树的基础 1、二叉树 1.和链表一样&#xff1a;动态存储 2.具有唯一的根 3.每个结点最多只有2个孩子&#xff0c;每个结点最多只有一个父亲 4.具有天然的递归结构 2、满二叉树 a. 叶子…

关于IP地址欺骗的知识,看这篇文章就差不多了

无论是什么媒介,身份盗窃始终是一种威胁。所谓的“IP欺骗”是恶意用户为了他们的黑客攻击企图快速获得可信度的一种常见方式。 考虑到每台计算机和服务器都有一个唯一的标识符(Internet Protocol或IP地址),几乎任何使用互联网的人都可能受到攻击。IP欺骗是一种“伪造”源地…

开始读 Oracle PL/SQL Programming 第6版

最近觉得PL/SQL越来越重要&#xff0c;因为这本书早就在待读列表中&#xff0c;因此决定系统的学一下。 2024年1月24日晚开始读。 在亚马逊上的评价还不错&#xff1a; 本书的第一作者是Steven Feuerstein&#xff0c;是Oracle资深的Developer Advocate。 本书的示例代码可…

Gradlew安装配置和使用

官网 https://gradle.org/install/ 在线安装 $ sdk install gradle 8.5Homebrew is “the missing package manager for macOS”. $ brew install gradle手动安装 安装包下载 安装 $ mkdir /opt/gradle $ unzip -d /opt/gradle gradle-8.5-bin.zip $ ls /opt/gradle/gradle…

使用Burp Collaborator验证无回显的RCE漏洞

使用Burp Collaborator验证无回显的RCE漏洞 1.概述2.Collaborator演示3.通过DNS查找外带命令执行结果1.概述 当应用程序容易受到命令注入攻击,但命令是异步执行时,就会发生异步操作系统命令注入漏洞。这意味着它对应用程序的响应没有明显影响 Burp Collaborator 可以帮助您…

JAVA_ArrayList添加元素时的源码分析(jdk17)

目录 ArrayList 在 Collection 中的位置&#xff1a; ArrayList 集合底层原理&#xff1a; 先总结&#xff1a; ArrayList 底层是数组结构的&#xff1a;查找快&#xff0c;增删慢 看源码&#xff1a; 看一些重要的源码&#xff1a; 第一次存元素&#xff1a; 逻辑总览…

C++ STL之queue的使用及模拟实现

文章目录 1. 介绍2. 队列的使用3. 队列的模拟实现 1. 介绍 英文解释&#xff1a; 也就是说&#xff1a; 队列是一种容器适配器&#xff0c;专门用于在FIFO上下文(先进先出)中操作&#xff0c;其中从容器一端插入元素&#xff0c;另一端提取元素。 队列作为容器适配器实现&…