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.mzph.cn/news/123361.shtml

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

相关文章

基于Ubuntu20.04安装ROS系统

文章目录 一、ROS简介二、ROS安装三、ROS安装测试四、安装问题解决1. sudo rosdepc init&#xff1a;找不到命令2. ERROR: cannot download default sources list from...3. Command roscore not found...4. Resource not found: roslaunch... 一、ROS简介 ROS是用于编写机器人…

C# 递归算法使用简介_常用整理

一、递归简介 递归算法是一种直接或者间接调用自身函数或者方法的算法。 递归算法的实质是把问题分解成规模缩小的同类问题的子问题&#xff0c;然后递归调用方法来表示问题的解。递归算法对解决一大类问题很有效&#xff0c;它可以使算法简洁和易于理解。 递归本质是循环&a…

Spring-声明式事务

声明式事务 一、简介1、准备工作2、测试 二、声明式事务概念1、编程式事务2、声明式事务3、基于注解的声明式事务1.测试无事务情况2.加入事务①Transactional注解标识的位置②事务属性&#xff1a;只读③事务属性&#xff1a;超时④事务属性&#xff1a;回滚策略⑤事务属性&…

文心一言 VS 讯飞星火 VS chatgpt (123)-- 算法导论10.4 4题

四、用go语言&#xff0c;对于一个含 n个结点的任意有根树&#xff0c;写出一个 O(n)时间的过程&#xff0c;输出其所有关键字该树以左孩子右兄弟表示法存储。 文心一言&#xff1a; 在计算机科学中&#xff0c;左孩子右兄弟表示法是一种用于表示树状结构的方法&#xff0c;其…

解决Maven打包Nacos时插件报错

Maven打包指令&#xff1a;mvn clean install -Dmaven.test.skiptrue -Dcheckstyle.skiptrue 在执行时报错&#xff0c;报错信息如下&#xff1a; Failed to execute goal org.xolstice.maven.plugins:protobuf-maven-plugin:0.6.1:compile (default) on project nacos-consist…

软考下午第一题 案列分析

期待分值 10&#xff0c;前三问12左右分&#xff0c;最后一题2、3分左右&#xff0c;重点在于拿下前面三题。 小心谨慎&#xff0c;不要大意。 数据流图 外部系统 数据存储 加工&#xff08;&#xff09;process 数据流 第二小题 说明给出存储名称&#xff0c;就使用该名称&…

走进国产机器人领军品牌华数机器人,共探数字化变革魔力

近日&#xff0c;纷享销客举办的“一院两司服务对接会暨走进纷享销客【数字化标杆】游学示范基地活动”在佛山顺利举行&#xff0c;本期活动走进华中数控旗下品牌、国家级专精特新“小巨人”企业华数机器人&#xff0c;特邀佛山华数机器人有限公司常务副总经理杨林、纷享销客广…

【vue3】样式穿透、完整新特性、动态css、css-module

一、样式穿透 vue2里面使用 /deep/ vue3里面使用 :deep() :deep(.el-input__inner){background-color: red; }二、完整新特性 :slotted() //parent.vue <template><div><p>这是父级</p><span></span><A><p class"red"…

高级深入--day44

Scrapy 和 scrapy-redis的区别 Scrapy 是一个通用的爬虫框架&#xff0c;但是不支持分布式&#xff0c;Scrapy-redis是为了更方便地实现Scrapy分布式爬取&#xff0c;而提供了一些以redis为基础的组件(仅有组件)。 pip install scrapy-redis Scrapy-redis提供了下面四种组件&a…

Unable to find GatewayFilterFactory with name TokenRelay

目录 问题分析解决方案参考文档开源项目微服务商城项目前后端分离项目 问题分析 Spring Cloud Gateway 网关作为代理资源服务器&#xff0c;需要将 JWT 传递给下游资源服务器&#xff0c;下面是网关的配置 spring:cloud:gateway:discovery:locator:enabled: true # 启用服务发…

.NET、VUE利用RSA加密完成登录并且发放JWT令牌设置权限访问

后端生成公钥私钥 使用RSA.ToXmlString(Boolean) 方法生成公钥以及私钥。 RSACryptoServiceProvider rSA new(); string pubKey rSA.ToXmlString(false);//公钥 string priKey rSA.ToXmlString(true);//私钥 后端将生成的公钥发送给前端 创建一个get请求&#xff0c;将…

光流估计(二) FlowNet 系列文章解读

在上篇文章中&#xff0c;我们学习并解了光流&#xff08;Optical Flow&#xff09;的一些基本概念和基本操作&#xff0c;但是传统的光流估计方法计算比较复杂、成本较高。近些年来随着CNN卷积神经网络的不断发展和成熟&#xff0c;其在各种计算机视觉任务中取得了巨大成功&am…

【剑指offer|图解|双指针】移除元素 + 合并两个有序数组

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、算法模板、汇编语言 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️移除元素二. ⛳️合并两个有序数组&#x1f4dd;全文总结 &#…

vue3后台管理系统

项目创建及代码规范化开发 vue脚手架创建项目 安装vue脚手架 npm install-g vue/cli npm update -g vue/cli终端输入vue create 项目名称 即可进入模板选择 //利用vue-cli创建项目 进入模板选择 Vue CLI v5.0.8 ? Please pick a preset:Default ([Vue 3] babel, eslint)De…

2011-2021年“第四期”数字普惠金融与上市公司匹配(根据城市匹配)/上市公司数字普惠金融指数匹配数据

2011-2021年“第四期”数字普惠金融与上市公司匹配&#xff08;根据城市匹配&#xff09;/上市公司数字普惠金融指数匹配数据 1、时间&#xff1a;2011-2021年 指标&#xff1a;指标&#xff1a;股票代码、年份、行政区划代码、行业名称、行业代码、所属省份、所属城市、数字…

省市区三级联动查询redis(通过python脚本导入数据)

最近工作有一个工作需求是实现省市区联动&#xff0c;点击省下拉框&#xff0c;选中一个省&#xff0c;然后再选市&#xff0c;最后选区&#xff0c;当然最重要的首先自然是数据了&#xff0c;没数据怎么测试接口&#xff0c;我数据是在 https://hxkj.vip/demo/echartsMap/ 这里…

No172.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

记一次任意文件下载到Getshell

任意文件下载&#xff08;Arbitrary File Download&#xff09;是一种常见的 Web 攻击技术&#xff0c;用于窃取服务器上任意文件的内容。攻击者利用应用程序中的漏洞&#xff0c;通过构造恶意请求&#xff0c;使应用程序将任意文件&#xff08;如配置文件、敏感数据等&#xf…

Typora(morkdown编辑器)的安装包和安装教程

Typora&#xff08;morkdown编辑器&#xff09;的安装包和安装教程 下载安装1、覆盖文件2、输入序列号①打开 typora &#xff0c;点击“输入序列号”&#xff1a;②邮箱一栏中任意填写&#xff08;但须保证邮箱地址格式正确&#xff09;&#xff0c;输入序列号&#xff0c;点击…

安防监控项目---boa服务器的移植

文章目录 前言一、boa服务器简介二、移植步骤三、测试结果四、A9平台移植BOA总结 前言 书接上期&#xff0c;在配置完成环境后&#xff0c;那么接下来呢还得移植两个非常关键的东西&#xff0c;一个呢时boa服务器&#xff0c;另一个呢时cgi接口&#xff0c;boa服务器能够使得我…