vue 树状结构数据渲染 (java 处理 list ->树状)

news2024/11/29 11:37:32

树状结构 Element ui

https://element.eleme.cn/#/zh-CN/component/tree

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

加入关键字进行过滤 和 数据渲染

  <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
            </el-input>
            <el-tree
                    class="filter-tree"
                    :data="data"
                    show-checkbox
                    :props="defaultProps"
                    accordion
                    :filter-node-method="filterNode"
                    ref="tree"
                    @node-click="handleNodeClick">
            </el-tree>
 watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created() {
            this.load_data()
        },
        mounted(){
        },//钩子函数,一般在初始化页面完成后,再对dom节点进行相关操作
        methods:{
            load_data(){
                const _this = this;
                axios({
                    method:"get",
                    url:"http://localhost:8089/tree/list",
                }).then(resp=>{
                    _this.data = resp.data
                });
            },
            handleNodeClick(data) {
                console.log(data.label);
                this.label = data.label

            },
            filterNode(value, data){
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            }
        },
        data(){
            return {
                label: "你好",
                filterText: '',
                data:[],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        }
    })

java Calss

在这里插入图片描述

package com.zhan;

import cn.hutool.json.JSONUtil;
import com.zhan.pojo.vo.TreeKnowledgePoints;
import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@SpringBootTest
public class Tree {
    private static List<TreeKnowledgePoints> treeKnowledgePoints;

    @Test
    void Test(){
        TreeKnowledgePoints points = new TreeKnowledgePoints(1,0,"操作系统引论");
        TreeKnowledgePoints points1 = new TreeKnowledgePoints(2,1,"操作系统作用和目标");
        TreeKnowledgePoints points2 = new TreeKnowledgePoints(3,2,"操作系统作用");
        TreeKnowledgePoints points3 = new TreeKnowledgePoints(4,2,"操作系统目标");
        treeKnowledgePoints = new ArrayList<TreeKnowledgePoints>();
        treeKnowledgePoints.add(points);
        treeKnowledgePoints.add(points1);
        treeKnowledgePoints.add(points2);
        treeKnowledgePoints.add(points3);
       List<TreeKnowledgePoints> list = buildTree(treeKnowledgePoints,0);
        System.out.println(JSONUtil.toJsonStr(list));
    }

    /**
     * 递归
     * @param deptList
     * @param pid
     * @return
     */
    private static List<TreeKnowledgePoints> buildTree(List<TreeKnowledgePoints> deptList,int pid){
        List<TreeKnowledgePoints> treeList = new ArrayList<TreeKnowledgePoints>();
        for (TreeKnowledgePoints dept : deptList) {
            if (dept.getParentId() == pid) {
                dept.setChildren(buildTree(deptList, dept.getId()));
                treeList.add(dept);
            }
        }
        return treeList;
    }


}

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

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

相关文章

1815_ChibiOS中的虚拟定时器

全部学习汇总&#xff1a; GreyZhang/g_ChibiOS: I found a new RTOS called ChibiOS and it seems interesting! (github.com) 1. 这个功能其实类似于FreeRTOS的设计&#xff0c;在FreeRTOS中也有这样的设计。 2. 一次性的定时器&#xff0c;这个不仅在FreeRTOS中见过&#x…

shell命令以及运行原理和lLinux权限

shell命令以及运行原理 什么是shell shell是操作系统的外壳程序统称&#xff0c;我们是通过shell去和操作系统沟通的。 从技术角度&#xff0c;shell最简单的定义就是命令行解释器&#xff0c;主要包含两个功能&#xff1a; 将使用者的命令翻译给核心处理 将核心的处理结果…

《数据结构、算法与应用C++语言描述》使用C++语言实现链表队列

《数据结构、算法与应用C语言描述》使用C语言实现链表队列 定义 队列的定义 队列&#xff08;queue&#xff09;是一个线性表&#xff0c;其插入和删除操作分别在表的不同端进行。插入元素的那一端称为队尾&#xff08;back或rear&#xff09;&#xff0c;删除元素的那一端称…

告别传统纸质期刊,电子期刊更环保更快捷

​【新发现】随着科技的发展&#xff0c;电子期刊逐渐取代了传统的纸质期刊&#xff0c;成为人们获取信息的新选择。电子期刊不仅环保&#xff0c;而且快捷方便&#xff0c;但是你知道怎么制作电子期刊吗&#xff1f; 不会制作的可以试试我推荐的这个网站----FLBOOK电子杂志制作…

Simulink 最基础教程(一)

1.1基本概念 一个典型的Simulink模型大致如上图这样&#xff1a; 1&#xff09;模块 block&#xff1a;图中画圈的那些&#xff0c;每个模块可以完成一些特定的任务&#xff0c;类似MATLAB中函数的概念。软件提供了很多模块&#xff0c;当然也可以自定义新的模块 2&#xff0…

进阶JAVA篇- Collection 类的常用的API与 Collection 集合的遍历方式

目录 1.0 Collection 类的说明 1.1 Collection 类中的实例方法 2.0 Collection 集合的遍历方式&#xff08;重点&#xff09; 2.1 使用迭代器&#xff08; Iterator &#xff09;进行遍历 2.2 使用增强型 for 循环进行遍历 2.3 使用 Java 8的 Stream API 进行遍历&#xff08;使…

线程安全之锁的原理

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ Linux       &#x1f6f0;️社区 :✈️ 进步学堂       &#x1f6f0…

思维模型 鸟笼效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。 1 鸟笼效应的应用 1.1 购物中的鸟笼效应 1 漂亮鞋子的故事 假设一个人在商场看到一双漂亮的鞋子&#xff0c;并冲动地购买了它们。当他回到家后&#xff0c;他发现这双鞋子并不适合他的…

【QT】QListWidget

新建项目 list widget&#xff0c;做了布局 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);// listWidget的使用&#xff0c;基于itemQListWidgetItem* item …

【电子通识】USB发展历史

USB接口自1994年推出以来&#xff0c;经过29年的发展&#xff0c;经过USB1.0/1.1、USB2.0、USB3.x&#xff0c;发展到了现在的USB4&#xff1b;传输速率也从最开始的1.5Mbps&#xff0c;大幅提高到了最新的40Gbps。 USB1.0 1996年1月15日推出USB1.0接口规范规定低速传输速率为…

数字孪生软件架构选BS还是CS?不,我们选择CSaaS!

BS&#xff08;Browser/Server&#xff09;和CS&#xff08;Client/Server&#xff09;是两种不同的软件架构模式&#xff0c;具有不同的特点和优缺点。 BS&#xff08;Browser/Server&#xff09;架构 BS架构指的是基于浏览器和服务器的软件架构&#xff0c;客户端通常是一个…

1814_ChibiOS中的时间以及时间间隔处理

全部学习汇总&#xff1a; GreyZhang/g_ChibiOS: I found a new RTOS called ChibiOS and it seems interesting! (github.com) 1. 时间的相关配置&#xff0c;有tick的计数精度、时钟频率、间隔时间精度、时间类型大小等不同的配置。这些参数&#xff0c;涉及到系统的时间计数…

JVMGC复习

TLAB:默认给每一个线程开辟一块内存空间存放线程自己的对象 Class对象是存放在堆区的&#xff0c;不是方法区&#xff0c;类的元数据元数据并不是类的Class对象&#xff0c;Class对象是加载的最终产品&#xff0c;类的方法代码&#xff0c;变量名&#xff0c;方法名&#xff0c…

解决windows中被占端口问题(实测有效)

1、用管理员身份打开cmd 2、输入命令查找所被占的端口号 例&#xff1a;8902 netstat -ano | findstr 8902终结被占端口号的进程 例&#xff1a;端口号为8080&#xff0c;则查找到的pid为18524 taskkill /t /f /pid 18524强制&#xff08;/F参数&#xff09; 子进程&#x…

小公司如何成功申请企业邮箱

对于小公司来说拥有专业的企业邮箱不仅有助于提升公司形象&#xff0c;还能有效提高工作效率。小公司怎么申请企业邮箱&#xff1f;以下是一些步骤和建议供您参考。 需要明确公司的需求。 这包括确定所需用户账户的数量&#xff08;一般是目前使用人数再加上几个备用的邮箱&…

Docker入门到精通教程

Docker是什么 Docker是一个开源的应用容器引擎&#xff0c;它基于Go语言并遵从Apache2.0协议开源。容器技术是和我们的宿主机共享硬件资源及操作系统&#xff0c;实现资源的动态分配&#xff0c;在资源受到隔离的进程中运行应用程序及其依赖关系。 Docker可帮助更快地打包、测…

Redis实现附近商户

GEO数据结构的基本用法 GEO就是Geolocation的简写形式&#xff0c;代表地理坐标。Redis在3.2版本中加入了对GEO的支持&#xff0c;允许存储地理坐标信息&#xff0c;帮助我们根据经纬度来检索数据。常见的命令有&#xff1a; GEOADD&#xff1a;添加一个地理空间信息&#xf…

【广州华锐互动】VR石油钻井井控实训系统

在过去的几十年中&#xff0c;石油工业的发展速度一直在加快。为了适应这个快速发展的行业&#xff0c;需要新的技术和工具&#xff0c;而VR&#xff08;虚拟现实&#xff09;技术正是其中之一。本文将探讨VR石油钻井井控实训系统在石油工业教育中的应用。 在真实的钻井环境中&…

接口管理神器Apipost

自诞生以来&#xff0c;Apipost凭借其简洁直观的用户界面、强大的功能以及简单、易上手的操作&#xff0c;让Apipost成为了开发人员不可或缺的工具。本文将详细介绍Apipost的主要功能和使用方法&#xff0c;帮助大家更好地了解这款优秀的API开发工具。 下载安装 直接进入Apip…

Stable Diffusion WebUI扩展a1111-sd-webui-tagcomplete之Booru风格Tag自动补全功能详细介绍

安装地址 直接附上地址先: Ranting8323 / A1111 Sd Webui Tagcomplete GitCodeGitCode——开源代码托管平台,独立第三方开源社区,Git/Github/Gitlabhttps://gitcode.net/ranting8323/a1111-sd-webui-tagcomplete.git上面是GitCode的地址,下面是GitHub的地址,根据自身情…