当前位置： 首页 > news >正文

通过el-tree 懒加载树，创建国家地区四级树

news 文章来源：https://blog.csdn.net/weixin_51722520/article/details/134082527 2025/5/9 0:35:15

 全国四级行政地区树数据库sql下载路径：【免费】全国四级地区(省市县)数据表sql资源-CSDN文库icon-default.png?t=N7T8https://download.csdn.net/download/weixin_51722520/88469807?spm=1001.2014.3001.5503         

        我在后台获取地区信息添加了限制，只获取parentid为当前的地区没所以没有显示全国数据

        前端使用饿了么的组件，添加lazy做懒加载，不需要将数据递归组装成树结构返回，每次点击时，向后端发送请求，请求当前父级下的子数据 。

<el-card style="height: 95%"><div style="  height: 520px; display: block;overflow-y: scroll;"><el-tree lazy :props="defaultProps" :load="loadNode" @node-click="handleNodeClick"></el-tree></div>
</el-card>

           绑定数据结构，label为展示的数据，isLeaf为是否是子节点，后端传值时，将isLeaf设置为true即可。

   defaultProps: {label: "name",isLeaf: "isLeaf",},

        loadNode会在页面被点击时自动调用，resolve回调方法会将查询到的数据，放入到树中，不需要将数据绑定。

        这里将数据做了判断，为空时给他赋值为141100000000，不为空则将node节点id给到父级id

         loadNode就是树的点击事件触发的方法

        loadNode回调resolve只接受List类型的数据

    //懒加载时查询叶子节点loadNode(node, resolve) {let params = node.data ? ('parent.id=' + node.data.id) : ('id=141100000000')this.get(ctx + '/basicinfo/region/getLeftNode?' + params).then((res) => {resolve(res)})},

         将点击时的node节点调用（可以不用写，与树没有太大联系，只是我业务中会用这个方法）

    handleNodeClick(node, e) {console.log("树被点击时调用事件")},

 

相关文章：

通过el-tree 懒加载树，创建国家地区四级树

全国四级行政地区树数据库sql下载路径&#xff1a;【免费】全国四级地区(省市县)数据表sql资源-CSDN文库https://download.csdn.net/download/weixin_51722520/88469807?spm1001.2014.3001.5503 我在后台获取地区信息添加了限制&#xff0c;只获取parentid为当前的地…...

编程日记 2023/10/28 9:46:10

Power BI 实现日历图，在一张图中展示天、周、月数据变化规律

《数据可视化》这本书里介绍了一个时间可视化的案例&#xff08;如下图所示&#xff09;&#xff0c;以日历图的形式展示数据的变化&#xff0c;可以在一张图上同时观察到&#xff1a;&#xff08;1&#xff09;每一天的数据变化&#xff1b;&#xff08;2&#xff09;随周变化…...

编程日记 2023/10/28 9:44:07

C/C++计算表达式值 2020年12月电子学会青少年软件编程（C/C++）等级考试一级真题答案解析

目录 C/C计算表达式值 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C计算表达式值 2020年12月 C/C编程等级考试一级编程题 一、题目要求 计算(ab)*(c-b)的值 1、编程实现 给定3个整数a、b、c&…...

编程日记 2023/10/28 9:43:05

XTU-OJ 1258-矩阵

编写一个程序&#xff0c;将1~n2按行依次填入nn的矩阵&#xff0c;执行若干条行或者列的循环移动的指令&#xff0c;再将数字按行依次取出。 指令如下&#xff1a; 指令含义L x yx行循环左移y次R x yx行循环右移y次U x yx列循环上移y次D x yx列循环下移y次 输入 第一行是一个整…...

编程日记 2023/10/28 9:42:05

Django token 认证原理与实战

概述 cookie、session 与token 的区别 Cookie的作用 cookie的存储量很小&#xff0c;一般不超过4Kcookie并不会保存很多信息&#xff0c;一般用来存储登录状态cookie是以键值对进行表示的(keyvalue),例如nameli,表示cookie的名字是name,cookie携带的值是licookie的存储分为会…...

编程日记 2023/10/28 9:41:04

JVM虚拟机：Java对象的头信息有什么？

本文重点 在前面的课程中，我们学习了对象头，其中对象头包含Mark Word和class pointer，当然数组还会有一个数组长度。本文主要分析Mark Work中包含的信息。 Mark Word 以下两张图是一个意思： 32位 32位 64位 以上就是Mark Word会存储的信息，这个意思是说Java对象在不同…...

编程日记 2023/10/28 9:40:03

场效应管器件

在面试硬件方面的工作时&#xff0c;我们通常会被提问模电方面的知识。 场效应管简称FET,有三级&#xff1a;源极(S)、漏极(D)、栅极&#xff08;G&#xff09;&#xff1b;可以实现电压控制电流源&#xff1b;“源极和漏极之间的漏极电流Id&#xff0c;由栅极的负电压进行控制…...

编程日记 2023/10/28 9:39:02

javascript之for循环介绍

javascript之for循环介绍 1&#xff09;语法&#xff1a; for ([initialization]; [condition]; [final-expression]) { // code to be executed }1&#xff09;initialization&#xff08;初始化&#xff09;&#xff1a;在循环开始之前执行&#xff0c;通常用于设置循环计…...

编程日记 2023/10/28 9:38:01

【机器学习可解释性】3.部分依赖图

机器学习可解释性 1.模型洞察的价值2.特征重要性排列3.部分依赖图4.SHAP Value5.SHAP Value 高级使用 正文 每个特征怎么样影响预测结果&#xff1f; 部分依赖图 Partial Dependence Plots 虽然特征重要性显示了哪些变量对预测影响最大&#xff0c;但部分依赖图显示了特征如…...

编程日记 2023/10/28 9:37:00

在CARLA中手动开车，添加双目相机stereo camera，激光雷达Lidar

CARLA的使用逻辑&#xff1a; 首先创建客户端 设置如果2秒没有从服务器返回任何内容&#xff0c;则终止 client carla.Client("127.0.0.1", 2000) client.set_timeout(2.0) 从客户端中get world world client.get_world() 设置setting并应用 这里使用固定时…...

编程日记 2023/10/28 9:35:59

【VUE】ArcoDesign之自定义主题样式和命名空间

前言 Arco Design是什么&#xff1f; Arco Design 是由字节跳动推出的企业级产品的完整设计和开发解决方案前端组件库 官网地址&#xff1a;https://arco.design/同时也提供了一套开箱即用的中后台前端解决方案&#xff1a;Arco Design Pro(https://pro.arco.design/) Arco De…...

编程日记 2023/10/28 9:34:58

TVRNet网络PyTorch实现

文章目录 文章地址网络各层结构代码实现 文章地址 An End-to-End Traffic Visibility Regression Algorithm文章通过训练搜集得到的真实道路图像数据集&#xff08;Actual Road dense image Dataset, ARD&#xff09;&#xff0c;通过专业的能见度计和多人标注&#xff0c;获得…...

编程日记 2023/10/28 9:33:57

opencv之坑（八）——putText中文乱码解决

opencv4.0之前版本和部分4.0版本的putText仅支持英文&#xff0c;如果中文会乱码&#xff0c;可以用下面方法构造函数解决&#xff1a; 头文件如下&#xff1a; #pragma once #ifndef PUTTEXT_H_ #define PUTTEXT_H_#include <windows.h> #include <string> #incl…...

编程日记 2023/10/28 9:32:56

nrf52832 开发板入手笔记：资料搜集

前言 最近翻箱&#xff0c;发现了两块几年前买的 NRF52832 与 NRF52840 的开发板&#xff0c;打算搭个 BLE 的开发环境 NRF52832 与 NRF51822 之前用过&#xff0c; NRF52840 没有用过&#xff0c;好像是 BLE4 与 BLE5 的区别吧 相关介绍 除了开发板&#xff0c;最重要的还是…...

编程日记 2023/10/28 9:31:55

PHP如何批量修改二维数组中值

每个name值加pex&#xff0c;age加5&#xff0c; 原数据&#xff1a; $data[["name">a,age>12],["name">b,age>22],["name">c,age>33],["name">d,age>44], ];实现效果 方案一、foreach引用方式 $data[["…...

编程日记 2023/10/28 9:30:54

Python 算法高级篇：归并排序的优化与外部排序

Python 算法高级篇&#xff1a;归并排序的优化与外部排序 引言 1. 归并排序的基本原理2. 归并排序的优化2.1 自底向上的归并排序2.2 最后优化 3. 外部排序4. 性能比较5. 结论 引言 在计算机科学中&#xff0c;排序是一项基本的任务&#xff0c;而归并排序&#xff08; Merge S…...

编程日记 2023/10/28 9:28:49

LeetCode--1991.找到数组的中间位置

1 题目描述 给你一个下标从 0 开始的整数数组 nums , 请你找到 最左边 的中间位置 middleIndex &#xff08;也就是所有可能中间位置下标最小的一个&#xff09; 中间位置 middleIndex 是满足 nums[0] nums[1] ... nums[middleIndex-1] nums[middleIndex1] nums[middleI…...

编程日记 2023/10/28 9:27:48

物联网数据采集网关连接设备与云平台的关键桥梁

随着工业4.0和智能制造的快速发展&#xff0c;物联网数据采集网关在工业物联网中的应用越来越广泛。物联网数据采集网关作为连接设备与云端之间的关键桥梁&#xff0c;能够实现高效、可靠、安全的数据传输和转换&#xff0c;为智能制造和工业4.0提供了强大的支持。 一、物联网…...

编程日记 2023/10/28 9:26:47

专家级数据恢复：UFS Explorer Professional Recovery Crack

UFS Explorer Professional Recovery - 一款功能强大且方便的数据恢复程序&#xff0c;支持检测大量文件系统、操作系统和各种类型的驱动器&#xff1a;从简单的闪存驱动器到复杂的复合存储&#xff08;各种级别的 RAID 阵列&#xff09;。 该程序由执业专家开发&#xff0c;并…...

编程日记 2023/10/28 9:25:47

2023/10/23 mysql学习

数据库修改 show databases; 展示所有数据库 create database 数据库名; 创建数据库 create database if not exists 数据库名; 如果未创建过当前数据库名则创建 drop database 数据库名; drop database if exists 数据库名;用法和创建类似 删除数据库 use 数据库名; 跳…...

编程日记 2023/10/28 9:24:45

软考系统架构师知识点集锦六：项目管理

一、考情分析 二、考点精讲 2.1进度管理(时间管理) 进度管理:为了确保项目按期完成所需要的管理过程。 2.1.1过程 [WBS分解的基本要求] WBS的工作包是可控和可管理的&#xff0c;不能过于复杂。任务分解也不能过细&#xff0c;一般原则WBS的树形结构不超过6层。每个工作包要…...

编程日记 2023/10/28 9:23:44

MacOS系统Chrome开发者模式下载在线视频

操作流程 # step1. 进入开发者模式 command option i # step2. 在搜索栏中搜索 getHttpVideoInfo.do?关键词 # step3. 在Preview的Json界面中找到video&#xff0c;然后选择不同resolution & duration的视频片段&#xff1b; # step4. 选择合适的video::chapters, 选择…...

编程日记 2023/10/28 9:21:43

uniapp v3+ts 使用 u-upload上传图片以及视频

上传图片方法 <u-upload :fileList"fileList1" afterRead"afterRead" delete"deletePic" name"file" multiple :maxCount"6"></u-upload> // maxCount 最大上传数const fileList1 ref([]);const file ref([…...

编程日记 2023/10/28 9:19:41

为什么虚拟dom会提高性能？

虚拟 DOM&#xff08;Virtual DOM&#xff09;是一种在前端开发中常用的技术&#xff0c;它可以提高性能并改善用户体验。虚拟 DOM 的原理和用处如下&#xff1a; 原理&#xff1a; 当页面状态发生变化时&#xff0c;虚拟 DOM 会以 JavaScript 对象的形式进行更新&#xff0c;而…...

编程日记 2023/10/28 9:18:39

2015年亚太杯APMCM数学建模大赛A题海上丝绸之路发展战略的影响求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛 A题 海上丝绸之路发展战略的影响 原题再现 一带一路不是实体或机制&#xff0c;而是合作与发展的理念和主张。凭借现有有效的区域合作平台&#xff0c;依托中国与有关国家现有的双边和多边机制&#xff0c;利用古丝绸之路的历史象征&#xff0…...

编程日记 2023/10/28 9:17:37

js中HTMLCollection如何循环

//不带索引 let divCon document.getElementsByClassName("el-form-item__error"); if (divCon.length > 0) {for (var item of divCon) {console.log("打印&#xff1a;", item.innerText);} }//带有索引 let divCon document.getElementsByClassNam…...

编程日记 2023/10/28 9:16:36

Kafka - 3.x 副本不完全指北

文章目录 kafka 副本的基本信息Leader选举过程Kafka Controllerkafka 分区副本Leader的选举流程实际演示① 查看first的详细信息&#xff0c;注意观察副本分布情况② 停掉hadoop103上的kafka进程③ 再次查看first的相信信息&#xff0c;观察副本分布④ 处理分区leader分布不均匀…...

编程日记 2023/10/28 9:13:32

二分归并法将两个数组合并

#define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> main() {int a[5] {1,3,4,5,6};int b[4] {2,7,8,9};int c[9];int m0, n0,k0;while (m < 5 && n < 4){if (a[m] < b[n]){c[k] a[m];//谁小谁先进数组m; k;}else{c[k] b[n];k; n;}}while (m <…...

编程日记 2023/10/28 9:12:32

ROS自学笔记十六：URDF优化_xacro文件

xacro 是一种 XML 扩展语言&#xff0c;用于创建和维护 URDF&#xff08;Unified Robot Description Format&#xff09;文件。它允许你使用参数化、宏和条件语句等功能来更灵活、更可维护地定义机器人模型。下面是关于 xacro 的详细解释&#xff1a; 1. 参数化&#xff08;Par…...

编程日记 2023/10/28 9:11:30

XMLHttpRequest拦截请求和响应

环境&#xff1a; angular 实现&#xff1a; 拦截请求 向请求信息增加字段 拦截响应 过滤返回值 响应拦截&#xff1a; 根据angular使用的XMLHttpRequest 将对原本的请求转移到另一个将监听返回事件挂载到另一个世纪发送请求的xml上 使用get set 将客户端获取的res…...

编程日记 2023/10/28 9:10:29