el -table 多层级嵌套

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

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

 前端代码

 <el-table:data="dataList"style="width: 100%"row-key="id"border:lazy="true":load="load":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-columnprop="name"label="组织姓名"width="180"></el-table-column><el-table-columnprop="natures"label="组织性质"width="180"></el-table-column><el-table-columnprop="dateEstablishment"label="成立时间"></el-table-column><el-table-columnprop="leader"label="组织领导"></el-table-column><el-table-columnprop="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=0this.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*/@Overridepublic List<OrganizationInfo> getOrganizationInfoByRegionId(OrganizationInfo organizationInfo) {//1.查询到所有该地区下的组织信息List<OrganizationInfo> organizationInfos = organizationInfoMapper.getOrganizationInfoByRegionId(organizationInfo);return organizationInfos;}

 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

又放学辣(进阶)(两次二分或两次后缀和)(小白80D)

D-又放学辣&#xff08;进阶&#xff09;_牛客小白月赛80 (nowcoder.com) 思路&#xff1a; 求最大值的最小值&#xff0c;》二分&#xff1b; 对于check函数&#xff0c;我们要统计cnt&#xff08;a[i]-t)的和(t为二分的量),如果cnt<k&#xff0c;说明答案小于t&#xf…

锁表后引发的几种删除方式与不同的扩展

在开发过程可能会遇到一些特殊场景&#xff0c;诸如我想删除某表&#xff0c;但是无法删除&#xff0c;去找原因发现是发生了锁表&#xff0c; 锁表指的是在执行一个事务时&#xff0c;该事务获取了一个锁并保持其锁定状态&#xff0c;直到事务完成或手动释放锁&#xff0c;导…

企业3D虚拟展台在线生成工具的功能特点

3D虚拟云展平台提供的上千个素材模版&#xff0c;还有用户编辑和上传的成功案例&#xff0c;此外&#xff0c;三维营销编辑器支持在线选择展台模版、建筑物、产品、特效、动画、图文及视频等&#xff0c;也可以自行上传3D模型/图文视频素材到对应分区&#xff0c;选择自己准备的…

【c++|opencv】二、灰度变换和空间滤波---2.直方图和均衡化

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 图像直方图、直方图均衡化 1. 图像直方图 #include <iostream> #include <opencv2/opencv.hpp>using namespace cv; using namespace std;…

项目赶工期,如何预防团队成员任务冲突?

项目赶工期时&#xff0c;如果发生任务冲突&#xff0c;往往会直接影响工作进度和效率&#xff0c;可能会导致任务的延误或错失关键节点&#xff0c;进而影响整个项目进度。因此预防团队成员任务冲突对于项目进度至关重要。它可以提高工作效率&#xff0c;保证项目进度&#xf…

MSQL系列(十) Mysql实战-Join驱动表和被驱动表如何区分

Mysql实战-Join驱动表和被驱动表如何区分 前面我们讲解了Mysql的查询连接Join的算法原理, 我发现大家都知道小表驱动大表,要让小表作为驱动表, 现在有2个问题 查询多表, 到底哪个是驱动表?哪个是被驱动表, 如何区分?索引如何优化,到底是加在驱动表上,还是被驱动表上? &…

k8s 资源预留

KUBERNETES资源管理之–资源预留 Kubernetes 的节点可以按照 Capacity 调度。node节点本身除了运行不少驱动 OS 和 Kubernetes 的系统守护进程&#xff0c;默认情况下 pod 能够使用节点全部可用容量&#xff0c; 除非为这些系统守护进程留出资源&#xff0c;否则它们将与 pod 争…

基于元学习神经网络的类人系统泛化

Nature 上介绍了一个关于AI在语言泛化方面的突破性研究。科学家们创建了一个具有人类般泛化能力的AI神经网络&#xff0c;它可以像人类一样将新学到的词汇融入现有词汇&#xff0c;并在新环境中使用它们。与ChatGPT 相比&#xff0c;该神经网络在系统性泛化测试中表现得更好。 …

视频下载工具Downie4 mac中文支持格式

Downie4 mac是一款视频下载工具。它支持下载各种视频网站上的视频&#xff0c;并且具有快速、稳定、易于使用的特点。 Downie支持下载各种视频网站上的视频&#xff0c;包括YouTube、Vimeo、Netflix、Hulu、Amazon等等。它具有快速、稳定的下载速度&#xff0c;可以帮助用户轻松…

优咔科技创新连接方案助力高质量5G车联服务

上海优咔网络科技有限公司 CEO 闫楠 【摘要】本文就智能网联汽车对高质量5G车联服务的需求背景和行业趋势进行了分析&#xff0c;主要介绍采用5G双SIM卡的创新连接方案&#xff0c;重点讲述双SIM卡联网的端到端体系架构和技术方案&#xff0c;并就优咔科技全方位支撑行业领先车…

分布式:一文吃透分布式事务和seata事务

目录 一、事务基础概念二、分布式事务概念什么是分布式事务分布式事务场景CAP定理CAP理论理解CAPCAP的应用 BASE定理强一致性和最终一致性BASE理论 分布式事务分类刚性事务柔性事务 三、分布式事务解决方案方案汇总XA规范方案1&#xff1a;2PC第一阶段&#xff1a;准备阶段第二…

Linux:Docker的介绍(1)

Docker官网 Docker: Accelerated Container Application Developmenthttps://www.docker.com/ docker是什么&#xff1f; 是一种轻量级的‘虚拟机’ 在Linux容器里运行应用的开源工具 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个…