通过el-tree 懒加载树,创建国家地区四级树
全国四级行政地区树数据库sql下载路径:【免费】全国四级地区(省市县)数据表sql资源-CSDN文库https://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下载路径:【免费】全国四级地区(省市县)数据表sql资源-CSDN文库https://download.csdn.net/download/weixin_51722520/88469807?spm1001.2014.3001.5503 我在后台获取地区信息添加了限制,只获取parentid为当前的地…...

Power BI 实现日历图,在一张图中展示天、周、月数据变化规律
《数据可视化》这本书里介绍了一个时间可视化的案例(如下图所示),以日历图的形式展示数据的变化,可以在一张图上同时观察到:(1)每一天的数据变化;(2)随周变化…...

C/C++计算表达式值 2020年12月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析
目录 C/C计算表达式值 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C计算表达式值 2020年12月 C/C编程等级考试一级编程题 一、题目要求 计算(ab)*(c-b)的值 1、编程实现 给定3个整数a、b、c&…...
XTU-OJ 1258-矩阵
编写一个程序,将1~n2按行依次填入nn的矩阵,执行若干条行或者列的循环移动的指令,再将数字按行依次取出。 指令如下: 指令含义L x yx行循环左移y次R x yx行循环右移y次U x yx列循环上移y次D x yx列循环下移y次 输入 第一行是一个整…...

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

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

场效应管器件
在面试硬件方面的工作时,我们通常会被提问模电方面的知识。 场效应管简称FET,有三级:源极(S)、漏极(D)、栅极(G);可以实现电压控制电流源;“源极和漏极之间的漏极电流Id,由栅极的负电压进行控制…...
javascript之for循环介绍
javascript之for循环介绍 1)语法: for ([initialization]; [condition]; [final-expression]) { // code to be executed }1)initialization(初始化):在循环开始之前执行,通常用于设置循环计…...

【机器学习可解释性】3.部分依赖图
机器学习可解释性 1.模型洞察的价值2.特征重要性排列3.部分依赖图4.SHAP Value5.SHAP Value 高级使用 正文 每个特征怎么样影响预测结果? 部分依赖图 Partial Dependence Plots 虽然特征重要性显示了哪些变量对预测影响最大,但部分依赖图显示了特征如…...
在CARLA中手动开车,添加双目相机stereo camera,激光雷达Lidar
CARLA的使用逻辑: 首先创建客户端 设置如果2秒没有从服务器返回任何内容,则终止 client carla.Client("127.0.0.1", 2000) client.set_timeout(2.0) 从客户端中get world world client.get_world() 设置setting并应用 这里使用固定时…...

【VUE】ArcoDesign之自定义主题样式和命名空间
前言 Arco Design是什么? Arco Design 是由字节跳动推出的企业级产品的完整设计和开发解决方案前端组件库 官网地址:https://arco.design/同时也提供了一套开箱即用的中后台前端解决方案:Arco Design Pro(https://pro.arco.design/) Arco De…...

TVRNet网络PyTorch实现
文章目录 文章地址网络各层结构代码实现 文章地址 An End-to-End Traffic Visibility Regression Algorithm文章通过训练搜集得到的真实道路图像数据集(Actual Road dense image Dataset, ARD),通过专业的能见度计和多人标注,获得…...
opencv之坑(八)——putText中文乱码解决
opencv4.0之前版本和部分4.0版本的putText仅支持英文,如果中文会乱码,可以用下面方法构造函数解决: 头文件如下: #pragma once #ifndef PUTTEXT_H_ #define PUTTEXT_H_#include <windows.h> #include <string> #incl…...

nrf52832 开发板入手笔记:资料搜集
前言 最近翻箱,发现了两块几年前买的 NRF52832 与 NRF52840 的开发板,打算搭个 BLE 的开发环境 NRF52832 与 NRF51822 之前用过, NRF52840 没有用过,好像是 BLE4 与 BLE5 的区别吧 相关介绍 除了开发板,最重要的还是…...

PHP如何批量修改二维数组中值
每个name值加pex,age加5, 原数据: $data[["name">a,age>12],["name">b,age>22],["name">c,age>33],["name">d,age>44], ];实现效果 方案一、foreach引用方式 $data[["…...

Python 算法高级篇:归并排序的优化与外部排序
Python 算法高级篇:归并排序的优化与外部排序 引言 1. 归并排序的基本原理2. 归并排序的优化2.1 自底向上的归并排序2.2 最后优化 3. 外部排序4. 性能比较5. 结论 引言 在计算机科学中,排序是一项基本的任务,而归并排序( Merge S…...
LeetCode--1991.找到数组的中间位置
1 题目描述 给你一个下标从 0 开始的整数数组 nums , 请你找到 最左边 的中间位置 middleIndex (也就是所有可能中间位置下标最小的一个) 中间位置 middleIndex 是满足 nums[0] nums[1] ... nums[middleIndex-1] nums[middleIndex1] nums[middleI…...
物联网数据采集网关连接设备与云平台的关键桥梁
随着工业4.0和智能制造的快速发展,物联网数据采集网关在工业物联网中的应用越来越广泛。物联网数据采集网关作为连接设备与云端之间的关键桥梁,能够实现高效、可靠、安全的数据传输和转换,为智能制造和工业4.0提供了强大的支持。 一、物联网…...

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

2023/10/23 mysql学习
数据库修改 show databases; 展示所有数据库 create database 数据库名; 创建数据库 create database if not exists 数据库名; 如果未创建过当前数据库名则创建 drop database 数据库名; drop database if exists 数据库名;用法和创建类似 删除数据库 use 数据库名; 跳…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...

Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...

STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码":Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力,从金融交易到交通管控,这些关乎国计民生的关键领域…...
在 Spring Boot 项目里,MYSQL中json类型字段使用
前言: 因为程序特殊需求导致,需要mysql数据库存储json类型数据,因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)
目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数(接收函数) sendto函数(发送函数) 五、网络编程之 UDP 用…...