el-tree树多选,将选中的树对象中某个字段值改为true,并过滤出所有为true的对象,组成新的数组

news2025/3/31 7:11:52

功能实现:
el-tree树多选,将选中的树对象中某个字段值改为true,并过滤出所有为true的对象,组成新的数组提交给后端

<template>
  <div>
    <!-- 树形菜单 -->
    <el-tree
      :data="stageList"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      @check-change="handleNodeClick"
    ></el-tree>

    <!-- 确定按钮和自定义操作 -->
    <div class="action-bar">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="customAction">自定义操作</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stageList: [
        {
          children: [
            {
              children: null,
              choose: false,
              createDept: 1,
              createTime: "2025-02-19 14:20:28",
              createUser: 2,
              description: "child1",
              id: 6,
              isDeleted: 0,
              name: "child1",
              parentId: 5,
              status: 0,
              updateTime: "2025-03-19 16:40:21",
              updateUser: 147238244,
              useStatus: 1,
              vaildStatus: null,
            },
          ],
          choose: false,
          createDept: 1,
          createTime: "2025-02-19 14:20:28",
          createUser: 2,
          description: "father3",
          id: 5,
          isDeleted: 0,
          name: "father3",
          parentId: 0,
          status: 0,
          updateTime: "2025-03-19 16:40:21",
          updateUser: 147238244,
          useStatus: 1,
          vaildStatus: null,
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      filteredList: [], // 存储过滤后的结果
    };
  },
  created() {
      // 数据加载完成后设置选中状态
      this.$nextTick(() => {
         const checkedKeys = this.getCheckedKeys(this.stageList);
         this.$refs.tree.setCheckedKeys(checkedKeys);
      });
  },
  methods: {
        // 递归收集选中节点ID
        getCheckedKeys(nodes) {
            let keys = [];
            if (!nodes) return keys;
            
            nodes.forEach(node => {
                if (node.choose) {
                keys.push(node.id);
                }
                if (node.children && node.children.length > 0) {
                keys = keys.concat(this.getCheckedKeys(node.children));
                }
            });
            return keys;
        },
    // 处理节点选中状态变化
    handleNodeClick(data, checked) {
      this.updateChoose(data, checked); // 更新选中节点及其子节点的 choose 字段
    },
    // 递归更新节点及其子节点的 choose 字段
    updateChoose(data, value) {
      data.choose = value;
      if (data.children && data.children.length > 0) {
        data.children.forEach((child) => {
          this.updateChoose(child, value);
        });
      }
    },
    // 点击确定按钮时过滤出 choose 为 true 的节点
    handleSubmit() {
      this.filteredList = this.filterSelected(this.stageList);
      console.log("Filtered List:", this.filteredList); // 打印过滤后的结果
    },
    // 递归过滤出 choose 为 true 的节点
    filterSelected(list) {
      const result = [];
      list.forEach((item) => {
        if (item.choose) {
          result.push(item);
        }
        if (item.children && item.children.length > 0) {
          result.push(...this.filterSelected(item.children));
        }
      });
      return result;
    },
    // 自定义操作
    customAction() {
      console.log("Custom action triggered");
      // 在这里实现自定义操作逻辑
    },
  },
};
</script>

<style>
.action-bar {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>

代码说明

  1. handleNodeClick 方法

    • 当节点选中状态变化时触发。
    • 调用 updateChoose 方法,将当前节点及其子节点的 choose 字段设置为 true 或 false
  2. updateChoose 方法

    • 递归地更新节点及其子节点的 choose 字段。
  3. handleSubmit 方法

    • 点击确定按钮时调用。
    • 调用 filterSelected 方法,过滤出 choose 为 true 的节点,并存储到 filteredList 中。
  4. filterSelected 方法

    • 递归地遍历树形数据,将 choose 为 true 的节点过滤到新数组中。
  5. customAction 方法

    • 自定义操作逻辑,可以根据需求实现。
  6. 样式调整

    • 使用 position: fixed 将操作栏固定在界面右下角。

至此完成!!!

测试有效!!!感谢支持!!!

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

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

相关文章

大文件版本管理git-lfs

1. 安装 Git Large File Storage (LFS) 是一个 开源的 Git 扩展&#xff0c;用于替换 Git 仓库中的大文件&#xff0c;用指针文件替代实际的大文件&#xff0c;可以在保持仓库轻量级的同时&#xff0c;有效地管理大型文件。 如果install提示失败&#xff0c;多试几次&#xf…

融合YOLO11与行为树的人机协作智能框架:动态工效学优化与自适应安全决策

人工智能技术要真正发挥其价值&#xff0c;必须与生产生活深度融合&#xff0c;为产业发展和人类生活带来实际效益。近年来&#xff0c;基于深度学习的机器视觉技术在工业自动化领域取得了显著进展&#xff0c;其中YOLO&#xff08;You Only Look Once&#xff09;算法作为一种…

Postgresql源码(142)子查询提升pull_up_sublinks

1 案例 drop table t_fun01; create table t_fun01 (image_id numeric primary key, content_id varchar(50), file_code varchar(20)); create index idx3 on t_fun01(content_id); create index idx4 on t_fun01(file_code); insert into t_fun01 select t.i, t.i%10, t.i%1…

23种设计模式-桥接(Bridge)设计模式

桥接设计模式 &#x1f6a9;什么是桥接设计模式&#xff1f;&#x1f6a9;桥接设计模式的特点&#x1f6a9;桥接设计模式的结构&#x1f6a9;桥接设计模式的优缺点&#x1f6a9;桥接设计模式的Java实现&#x1f6a9;代码总结&#x1f6a9;总结 &#x1f6a9;什么是桥接设计模式…

【黑皮书】 AVL树

目录 前言 一 AVL树的介绍 二 单旋转 二 双旋转 总结 前言 AVL树的学习 一 AVL树的介绍 AVL树是带有平衡条件的二叉查找树&#xff0c;这个平衡条件要持续保持&#xff0c;而且必须保证树的深度为O(log(N))最简单的想法就是要求左右子树具有相同的高度 一棵AVL树是…

【机器学习】什么是决策树?

什么是决策树&#xff1f; 决策树是一种用于分类和回归问题的模型。它通过一系列的“决策”将数据逐步分裂&#xff0c;最终得出预测结果。可以把它看作是一个“树”&#xff0c;每个节点表示一个特征的判断&#xff0c;而每个分支代表了可能的判断结果&#xff0c;最终的叶子…

使用独立服务器的最佳方式指南

在寻找合适的主机服务方案时&#xff0c;可以考虑独立服务器&#xff0c;因为它拥有管理员权限以及更高的性能配置。在本指南中&#xff0c;我们将介绍独立服务器的多种用途&#xff0c;并分析为什么选择独立服务器可能是处理高性能、资源密集型应用和大流量网站的最佳方案。 搭…

【HTML 基础教程】HTML 属性

HTML 属性 属性是 HTML 元素提供的附加信息。 属性通常出现在 HTML 标签的开始标签中&#xff0c;用于定义元素的行为、样式、内容或其他特性。 属性总是以 name"value" 的形式写在标签内&#xff0c;name 是属性的名称&#xff0c;value 是属性的值。 HTML 属性 …

爬虫问题整理(2025.3.27)

此时此刻&#xff0c;困扰我一天的两个问题终于得到了解决&#xff0c;在此分享给大家。 问题1&#xff1a;使用anaconda prompt无法进行pip安装&#xff0c;这里只是一个示例&#xff0c;实际安装任何模块都会出现类似报错。 解决办法&#xff1a;关掉梯子......没错&#xf…

短信验证码安全需求设计

背景&#xff1a; 近期发现部分系统再短信充值频繁&#xff0c;发现存在恶意消耗短信额度现象&#xff0c;数据库表排查&#xff0c;发现大量非合法用户非法调用短信接口API导致额度耗尽。由于系统当初设计存在安全缺陷&#xff0c;故被不法分子进行利用&#xff0c;造成损失。…

若依专题——基础应用篇

若依搭建 搭建后端项目 ① Git 克隆并初始化项目 ② MySQL 导入与配置 ③ 启动 Redis 搭建后端项目注意事项&#xff1f; ① 项目初始化慢&#xff0c;执行clean、package ② MySQL导入后&#xff0c;修改application-druid.yml ③ Redis有密码&#xff0c;修改ap…

AI for CFD入门指南(传承版)

AI for CFD入门指南 前言适用对象核心目标基础准备传承机制 AI for CFDLibtorch的介绍与使用方法PytorchAutogluon MakefileVscodeOpenFOAMParaviewGambit 前言 适用对象 新加入课题组的硕士/博士研究生对AICFD交叉领域感兴趣的本科生实习生需要快速上手组内研究工具的合作研…

DeepSeek+RAG局域网部署

已经有很多平台集成RAG模式&#xff0c;dify&#xff0c;cherrystudio等&#xff0c;这里通过AI辅助&#xff0c;用DS的API实现一个简单的RAG部署。框架主要技术栈是Chroma,langchain,streamlit&#xff0c;答案流式输出&#xff0c;并且对答案加上索引。支持doc,docx,pdf,txt。…

个人学习编程(3-24) 数据结构

括号的匹配&#xff1a; if((s[i]) && now() || (s[i]] && now[)){ #include <bits/stdc.h>using namespace std;int main() {char s[300];scanf("%s",&s);int i;int len strlen(s);stack <char> st;for (i 0; i < len; i){if(…

面试八股文--框架篇(SSM)

一、Spring框架 1、什么是spring Spring框架是一个开源的Java平台应用程序框架&#xff0c;由Rod Johnson于2003年首次发布。它提供了一种全面的编程和配置模型&#xff0c;用于构建现代化的基于Java的企业应用程序。Spring框架的核心特性包括依赖注入&#xff08;DI&#xf…

跨语言语言模型预训练

摘要 最近的研究表明&#xff0c;生成式预训练在英语自然语言理解任务中表现出较高的效率。在本研究中&#xff0c;我们将这一方法扩展到多种语言&#xff0c;并展示跨语言预训练的有效性。我们提出了两种学习跨语言语言模型&#xff08;XLM&#xff09;的方法&#xff1a;一种…

Nodejs上传文件的问题

操作系统&#xff1a;window和linux都会遇到 软件环境&#xff1a;v20.10.0的Nodejs 1、前端代码如下&#xff1a; 2、后端Nodejs 2.1、注册接口 2.2、上传接口 其中memoryUpload方法代码如下&#xff1a; 3、用页面上传文件 查看具体报错原因&#xff1a; TypeError: sourc…

无人机螺旋桨平衡标准

螺旋桨平衡是确保无人机(UAV)平稳运行、可靠性和使用寿命的关键过程。螺旋桨的不平衡会导致振动、噪音&#xff0c;并加速关键部件的磨损&#xff0c;从而对飞行性能产生负面影响。 ISO 21940-11:2016标准为旋翼平衡提供了一个广泛引用的框架&#xff0c;定义了可接受的不平衡…

SpringBoot+策略模式+枚举类,使用配置文件改进,优雅消除if-else,完全符合OOP原则

需求分析 公司做物联网系统的&#xff0c;使用nettry进行设备连接&#xff0c;对设备进行数据采集&#xff0c;根据设备的协议对数据进行解析&#xff0c;解析完成之后存放数据库&#xff0c;但是不同厂家的设备协议不同。公司系统使用了使用了函数式编程的去写了一个解析类&am…

每日免费分享之精品wordpress主题系列~DAY16

主题介绍&#xff1a; 今日在网上寻找wordpress主题的时候逛到了大叔的网站&#xff0c;赶脚这个主题蛮不错的&#xff0c;于是百度一下&#xff0c;果然&#xff0c;这个主题很受欢迎。作为主题下载站追梦者也不甘落后&#xff0c;马上就发布出来了&#xff0c;希望对你们有用…