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

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

 全国四级行政地区树数据库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为当前的地…...

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

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

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-矩阵

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

Django token 认证原理与实战

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

JVM虚拟机:Java对象的头信息有什么?

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

场效应管器件

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

javascript之for循环介绍

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

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

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

在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并应用 这里使用固定时…...

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

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

TVRNet网络PyTorch实现

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

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…...

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

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

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[["…...

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

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

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

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

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

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

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

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

2023/10/23 mysql学习

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

旧iOS设备系统优化完全指南:让你的设备重获新生

旧iOS设备系统优化完全指南&#xff1a;让你的设备重获新生 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to downgrade/restore, save SHSH blobs, and jailbreak legacy iOS devices 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit 一、问题诊断…...

百度网盘提取码智能获取工具:3秒解锁任何分享资源的终极方案

百度网盘提取码智能获取工具&#xff1a;3秒解锁任何分享资源的终极方案 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾遇到过这样的场景&#xff1f;好不容易找到一个急需的学习资源&#xff0c;点击百度网盘链接后…...

Swin2SR模型可解释性:理解超分决策过程

Swin2SR模型可解释性&#xff1a;理解超分决策过程 1. 引言 当我们使用Swin2SR这样的超分辨率模型时&#xff0c;经常会惊叹于它能够将模糊的低分辨率图像转换为清晰的高分辨率图像。但你是否好奇过&#xff0c;这个"AI显微镜"是如何做出这些决策的&#xff1f;它是…...

Neovim美化踩坑实录:从乱码图标到完美主题,我的init.lua配置全解析(附避坑清单)

Neovim美化踩坑实录&#xff1a;从乱码图标到完美主题&#xff0c;我的init.lua配置全解析&#xff08;附避坑清单&#xff09; 第一次打开Neovim时&#xff0c;满屏的方块符号和刺眼的默认配色让我差点以为打开了某个古董终端。作为从VSCode转投Neovim的开发者&#xff0c;我原…...

Windows下OpenClaw全流程指南:接入Qwen3.5-4B-Claude完成办公自动化

Windows下OpenClaw全流程指南&#xff1a;接入Qwen3.5-4B-Claude完成办公自动化 1. 为什么选择OpenClaw做办公自动化 去年我接手了一个新项目&#xff0c;每周需要处理几十份会议录音转写的文字稿。手动整理不仅耗时&#xff0c;还经常漏掉关键行动项。当我第一次听说OpenCla…...

微服务测试策略:端到端质量保障

微服务测试策略&#xff1a;端到端质量保障作者&#xff1a;AI测试工程师 关键词&#xff1a;微服务测试、集成测试、契约测试、端到端一、微服务测试挑战 1.1 测试金字塔变化 传统应用&#xff1a; 微服务应用&#xff1a;/\ /\/ \ / \/…...

Comsol 仿真纳米孔超表面的手性响应:探索微观世界的光学奥秘

comsol仿真纳米孔超表面的手性响应在光学领域&#xff0c;超表面以其独特的亚波长结构展现出对光的卓越操控能力&#xff0c;而手性超表面更是其中的璀璨明珠&#xff0c;能够对不同旋向的圆偏振光产生特异响应。今天咱们就来聊聊如何用 Comsol 对纳米孔超表面的手性响应进行仿…...

HRN模型与PID控制结合:实时面部动画调节系统

HRN模型与PID控制结合&#xff1a;实时面部动画调节系统 1. 引言 想象一下&#xff0c;你正在制作一部动画电影&#xff0c;主角的面部表情需要精确到每一帧的微妙变化。传统的手工调整方式耗时耗力&#xff0c;而自动生成的表情又往往缺乏自然流畅的过渡。这就是为什么我们需…...

无网环境下的containerd部署实战:从静态二进制到服务就绪

1. 为什么需要离线部署containerd&#xff1f; 在工业控制、军工系统、金融核心业务等特殊场景中&#xff0c;服务器往往运行在物理隔离的网络环境中。我曾经参与过一个智能制造项目&#xff0c;生产线的控制服务器连内网都不允许接入&#xff0c;更别说访问互联网了。这种环境…...

如何突破窗口限制?专业窗口调整工具让桌面管理效率提升300%

如何突破窗口限制&#xff1f;专业窗口调整工具让桌面管理效率提升300% 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 你是否曾遇到过这样的困扰&#xff1a;重要的应用程序窗口无…...