el -table 多层级嵌套

news2024/11/25 18:57:22

        只要你后端可以查到数据这个层级可以无限嵌套 

        这里用了懒加载,每次点击的时候将当前点击的父级id作为查询条件,向后端发送请求,来获取他子级的数据,并不是将所有数据查出来拼接返回的。

 前端代码

 <el-table
            :data="dataList"
            style="width: 100%"
            row-key="id"
            border
            :lazy="true"
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                            prop="name"
                            label="组织姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="natures"
                            label="组织性质"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="dateEstablishment"
                            label="成立时间">
                    </el-table-column>
                    <el-table-column
                            prop="leader"
                            label="组织领导">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
</el-table>
        data() {
            return {
                inputForm: {
                    id: '',
                    parentId: '',
                    name: '',
                    sort: '',
                    natures: '',
                    area: '',
                    longitude: '',
                    latitude: '',
                    dateEstablishment: '',
                    leader: '',
                    address: '',
                    regionId:'',
                    regionParentIds:''
                },
                dataList: [],
                loading: false,
           
            }
        },
created() {
            // this.refreshList()
            this.initList()
        },
        methods: {
    
            //获取右边树表
            initList() {
                this.inputForm.parentId=0

                this.get(/organizationInfo/getOrganizationInfoByRegionId?parentId='+this.inputForm.parentId+'&regionId='+this.inputForm.regionId).then((res) => {
                    this.dataList = res
                })

            },
            load(row, treeNode, resolve) {
                this.get(ctx + '/basicinfo/organizationInfo/getOrganizationInfoByRegionId?parent.id=' + row.id).then((res) => {
                    resolve(res)
                })
            },
}

 后端代码

    /**
     * 通过地区id查询当前Parent的数据
     *
     * @param regionId
     * @return
     */
    @Override
    public List<OrganizationInfo> getOrganizationInfoByRegionId(OrganizationInfo organizationInfo) {
        //1.查询到所有该地区下的组织信息
        List<OrganizationInfo> organizationInfos = organizationInfoMapper.getOrganizationInfoByRegionId(organizationInfo);
        return organizationInfos;
    }

 

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

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

相关文章

12、SpringCloud -- redis库存和redis预库存保持一致、优化后的压测效果

目录 redis库存和redis预库存保持一致问题的产生需求:代码:测试:优化后的压测效果之前的测试数据优化后的测试数据redis库存和redis预库存保持一致 redis库存是指初始化是从数据库中获取最新的秒杀商品列表数据存到redis中 redis的预库存是指每个秒杀商品每次成功秒杀之后…

【JAVA学习笔记】52 - 本章作业

1.字符反转 注意String是final的不能改变需要toCharArray改成char数组 返回String需要将char改成valueOf改为String public class HomeWork01 {public static void main(String[] args) {String str "0123456789";//改变的是char&#xff0c;和str无关try {System…

项目|金额场景计算BigDecimal使用简记

前言 在实际项目开发中&#xff0c;我们经常会遇到一些金额计算&#xff0c;分摊等问题&#xff0c;通常我们都使用java.math.BigDecimal 来完成各种计算&#xff0c;避免使用浮点数float,double来计算金额&#xff0c;以免丢失精度&#xff0c;以下是博主部分使用场景和使用Bi…

element-plus走马灯不显示

问题描述 依赖正确&#xff0c;代码用法正确&#xff0c;但是element-plu走马灯就是不显示&#xff01;&#xff01; <div class"content"><el-carousel height"150px" width"200px"><el-carousel-item v-for"item in 4&qu…

联想电脑thinkpad x13摄像头打不开,史上最全的针对联想电脑摄像头的解决方案

前言 最近面试&#xff0c;临近面试的前30min&#xff0c;发现摄像头打不开。具体情况如下&#xff1a; 这可没把我吓坏&#xff0c;我可是要露脸的&#xff0c;最后在我的不屑努力下&#xff0c;我选择了手机视频面试&#xff0c;很干。未来的几天都在琢磨这玩意儿了&#…

Docker 部署spring-boot项目(超详细 包括Docker详解、Docker常用指令整理等)

文章目录 DockerDocker的定义Docker有哪些作用Docker有哪些好处使用docker部署springboot项目安装docker创建Dockerfile镜像文件执行镜像文件(Dockerfile文件)查看Docker镜像启动容器查看Docker中运行的容器查看服务容器日志 Docker常用指令查看docker安装目录启动Docker停止Do…

MGRE环境下的OSPF

实验拓扑 需求 1 R6为ISP只能配置IP地址&#xff0c;R1-R5的环回为私有网段 2 R1/4/5为全连的MGRE结构&#xff0c;R1/2/3为星型的拓扑结构&#xff0c;R1为中心站点 3 所有私有网段可以互相通讯&#xff0c;私有网段使用OSPF完成。 IP规划 配置IP R1 # interface GigabitEt…

第三次ACM校队周赛考核题+生活随笔

本周ACM校队周赛考核题 1.简单数学&#xff08;签到题&#xff09; 题目&#xff1a; Joker想要买三张牌&#xff0c;但是三张牌太少了&#xff0c;老板不卖&#xff0c;除非Joker算出老板给出的数学题。 现在老板给出t组数据&#xff0c;每一组数据有三个数a,b,c&#xff0c…

【从0到1设计一个网关】整合Nacos-服务注册与服务订阅的实现

文章目录 Nacos定义服务注册与订阅方法服务信息加载与配置实现将网关注册到注册中心实现服务的订阅 Nacos Nacos提供了许多强大的功能&#xff1a; 比如服务发现、健康检测。 Nacos支持基于DNS和基于RPC的服务发现。 同时Nacos提供对服务的实时的健康检查&#xff0c;阻止向不…

【JavaSE】运算符详解及与C语言中的区别

在文章的最后&#xff0c;总结了Java与C语言的某些不同点 目录 一、什么是运算符 二、算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符/-- 三、关系运算符 四、逻辑运算符&#xff08;重点&#xff09; 1.逻辑与&& 2.逻辑或|| 3.逻辑非 4.补…

SQL Server 安装失败 服务“MSSQLServerOLAPService”启动请求失败 一定有效的解决方案

问题描述 首次安装 SQL Server 2022&#xff0c;在安装结束时出现弹窗“无法启动服务。原因&#xff1a;服务“MSSQLServerOLAPService”启动请求失败”。 点击“确定”按钮后&#xff0c;出现新弹窗。 问题原因 在Windows服务中手动启动“MSSQLServerOLAPService”&#x…

建筑木模板现货供应,广东隧道地铁木模板批发。

我们是一家专业供应建筑木模板的公司&#xff0c;提供广东地区的现货供应服务。我们特别推荐我们的隧道地铁木模板&#xff0c;专为隧道和地铁工程而设计&#xff0c;为工程施工提供优质可靠的支撑材料。我们的隧道地铁木模板采用高品质的木材制造而成&#xff0c;具有卓越的强…

muduo源码剖析之Buffer缓冲区类

简介 Buffer封装了一个可变长的buffer&#xff0c;支持廉价的前插操作&#xff0c;以及内部挪腾操作避免额外申请空间 使用vector作为缓冲区(可自动调整扩容) 设计图 源码剖析 已经编写好注释 buffer.h // Copyright 2010, Shuo Chen. All rights reserved. // http://c…

msvcp140.dll丢失的正确解决方法

在使用电脑中我们经常会遇到一些错误提示&#xff0c;其中之一就是“msvcp140.dll丢失”。这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题&#xff0c;我们需要采取一些措施来修复丢失的msvcp140.dll文件。本文将介绍6个不同的解决方法&#xff0c;帮助读者解决…

java lombok

Lombok是一个实用的Java类库&#xff0c;可以通过简单的注解来简化和消除一些必须有但显得很臃肿的Java代码。 通过注解的形式自动生成构造器、getter/setter、equals、hashcode、toString等方法&#xff0c;并可以自动化生成日志变量&#xff0c;简化java开发、提高效率&#…

AI:39-基于深度学习的车牌识别检测

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌本专栏包含以下学习方向: 机器学习、深度学…

不用动脑子的技巧!已知二叉树的前序中序遍历,确定二叉树/求后序遍历

根据前&#xff08;后&#xff09;序、中序&#xff0c;确定二叉树&#xff0c;高妙的方法&#xff01;&#xff01;&#xff01; 二叉树的前中后序遍历⏩巧妙的方法&#xff01;根据前序遍历和中序遍历&#xff0c;确定二叉树例题1例题2 根据后序遍历和中序遍历&#xff0c;确…

CS224W3.2——随机游走(Random Walk)

上一文中说道定义节点相似度函数的时候使用Random Walk方法&#xff1a; CS224W3.1——节点Embedding 这节课来说一下Random Walk方法。在这篇中&#xff0c;我们来看一个更有效的相似函数——在图上随机游走的节点共现的概率。我们介绍随机游走背后的直觉&#xff0c;我们将…

中电文思海辉:塑造全球AI能力,持续强化诸多行业战略

【科技明说 &#xff5c; 重磅专题】 中电文思海辉以前就是叫文思海辉&#xff0c; 这是由之前两家上市软件外包公司文思信息和海辉软件合并而来&#xff0c;2018年当时各自股票以1:1的比例进行整合&#xff0c;双方股东各持有新公司50%的股权&#xff0c;合并后新公司名称为文…

私有云:【4】Esxi安装Server2012R2

私有云&#xff1a;【4】Esxi安装Server2012R2 1、使用Esxi安装虚拟机2、启动虚拟机3、安装必要服务及打补丁 1、使用Esxi安装虚拟机 选择esxi虚拟机挂在Win2012的镜像iso 使用Esxi客户端新建虚拟机 设置虚拟机名称及系统作为模板&#xff0c;如图所示 选择数据存储&#xff0…