通过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("树被点击时调用事件")},

 

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

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

相关文章

LeetCode题:70爬楼梯,126斐波那契数

目录 70&#xff1a;爬楼梯 题目要求&#xff1a; 解题思路&#xff1a;&#xff08;类似斐波那契数&#xff09; 递归解法&#xff1a; 非递归解法&#xff1a; 126&#xff1a;斐波那契数 题目要求&#xff1a; 解题思路&#xff1a; 递归解法&#xff1a; 非递归解…

python—openpyxl操作excel详解

前言 openpyxl属于第三方模块&#xff0c;在python中用来处理excel文件。 可以对excel进行的操作有&#xff1a;读写、修改、调整样式及插入图片等。 但只能用来处理【 .xlsx】 后缀的excel文件。 使用前需要先安装&#xff0c;安装方法&#xff1a; pip install openpyxl…

Doceker-compose——容器群集编排管理工具

目录 Docker-compose 1、Docker-compose 的三大概念 2、YAML文件格式及编写注意事项 1&#xff09;使用 YAML 时需要注意下面事项 2&#xff09;ymal文件格式 3&#xff09;json格式 3、Docker Compose配置常用字段 4、Docker-compose的四种重启策略 5、Docker Compos…

k8s statefulSet 学习笔记

文章目录 缩写: stsweb-sts.yaml创建sts扩缩容金丝雀发布OnDelete 删除时更新 缩写: sts 通过 kubectl api-resources 可以查到&#xff1a; NAMESHORTNAMESAPIVERSIONNAMESPACEDKINDstatefulsetsstsapps/v1trueStatefulSet web-sts.yaml apiVersion: v1 kind: Service met…

Lintcode 3715 · Lowest Common Ancestor V (最小祖先好题)

3715 Lowest Common Ancestor VPRE Algorithms Medium This topic is a pre-release topic. If you encounter any problems, please contact us via “Problem Correction”, and we will upgrade your account to VIP as a thank you. Description Given a binary tree wit…

1688阿里巴巴中国站电商数据官方平台API接口按图搜索1688商品(拍立淘)响应示例说明

按图搜索1688商品数据接口的用途是帮助用户通过上传图片来搜索相似的商品&#xff0c;或者通过图片链接获取商品详情信息、SKU信息、销量信息等。 1688.item_search_img-按图搜索1688商品&#xff08;拍立淘&#xff09; 公共参数 请求地址: 注册调用key请求接入 名称类型必…

Canal整合SpringBoot详解(一)

文章目录 Canal整合SpringBoot详解&#xff08;一&#xff09;什么是canal搭建Kafka3.2.1集群⭐Kafka集群机器规划创建3台虚拟机&#xff08;centos7系统&#xff09;必要的环境准备&#xff08;3台虚拟机都要执行如下操作&#xff09;⭐分别修改每个服务器的hosts文件&#xf…

为指定 java 类生成 PlantUML puml文件工具( v2 )

AttributePumlVO.java&#xff1a; import lombok.Getter; import lombok.Setter;import java.io.Serializable;Getter Setter public class AttributePumlVO implements Serializable {/*** 属性名称*/private String name;/*** 属性类型*/private Class type;Overridepublic …

vue 使用openlayers导出渲染的地图

下载地图官方示例: http://openlayers.org/en/latest/examples/export-map.html http://openlayers.org/en/latest/examples/export-pdf.html 我这儿使用到了 file-saver (下载图片、附件) npm install file-saver --save import { saveAs } from file-saver; // 执行下…

docker - window Docker Desktop升级

文章目录 前言docker - window Docker Desktop升级 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0c;那欢迎常来…

【python画画】蘑菇云爱心

来源于网上短视频 数学原理不懂&#xff0c;图个乐 import math from turtle import *def x(i):return 15 * math.sin(i) ** 3 * 20def y(i):return 20 * (12 * math.cos(i) - 5 * math.cos(2 * i) - 2 * math.cos(4 * i))speed(0) color(red) pensize(10) for i in range(51…

【音视频】Linux | FFmpeg源码搭建

Linux | FFmpeg源码搭建 时间:2023-06-21 文章目录 `Linux` | `FFmpeg`源码搭建@[toc]1.参考2.获取源码2-1.建立工作目录2-2.获取`AAC`2-3.获取`X264`2-4.获取`X265`2-5.获取`FFmpeg`3.编译/安装3-1.编译`AAC`3-1-1.解压源码3-1-2.编译3-1-3.安装3-2.编译`X264`3-2-1.解压源码…

Western blot实验步骤

Western blot实验步骤 1 Western blot原理介绍 Western blot是一种通过凝胶电泳分离蛋白质&#xff0c;将其印迹或转移到膜上&#xff0c;并对固定抗原进行选择性免疫检测的技术。这是一种重要的、常规的蛋白质分析方法&#xff0c;依赖于抗体-抗原相互作用的特异性&#xff0…

初级前端面试题(一) 之 html/css/js

目 录 一、 HTML 1. .如何理解HTML语义化的&#xff1f; 2. HTML标签有哪些&#xff1f; 3. Canvas 和SVG的区别 二、CSS 1. BFC是什么&#xff1f; 2. 如何实现垂直居中&#xff1f; 3. css选择器 优先级如何确定&#xff1f; 4. 如何清除浮动&#xff1f; 5. …

Elasticsearch7.8.1集群安装手册

1. 部署说明 elasticsearch集群规划为三个节点&#xff0c;elasticsearch版本为7.8.1 2. 下载安装包 1&#xff09;下载 Elasticsearch7.8.1安装包 # cd /opt # wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.8.1-linux-x86_64.tar.gz3. Ela…

C++设计模式_14_Facade门面模式

本篇介绍的Facade门面模式属于“接口隔离”模式的一种&#xff0c;以下进行详细介绍。 文章目录 1. “接口隔离”模式1. 1 典型模式 2. 系统间耦合的复杂度3. 动机(Motivation)4. 模式定义5. Facade门面模式的代码实现6. 结构7. 要点总结8. 其他参考 1. “接口隔离”模式 在组…

笔记44:Batch_Normlization 过程详解

笔记本地地址&#xff1a;D:\work_file\DeepLearning_Learning\03_个人笔记\2.图像处理任务\BN a a a a a a a a a a a a a a a a a

抖音上怎么挂小程序?制作小程序挂载抖音视频

公司企业商家现在已经把抖音作为营销的渠道之一&#xff0c;目前抖音支持短视频挂载小程序&#xff0c;可方便做营销。以下给大家分享这一操作流程。 一、申请自主挂载能力 首先需要在抖音开放平台官网注册一个抖音小程序账号&#xff0c;然后申请短视频自主挂载能力。 二、搭…

Liunx两台服务器实现相互SSH免密登录

一、首先准备两台Linux虚拟机当作此次实验的两台服务器 服务器1&#xff1a;server IPV4&#xff1a;192.168.110.136 服务器2&#xff1a;client IPV4&#xff1a; 192.168.110.134 二、准备阶段 [rootserver ~]# systemctl disable firewalld #关…

Umijs创建一个antd+Ts项目环境

上文搭建Umijs环境并创建一个项目 介绍基本操作中 我们构建了一个Umijs环境的环境 但也只创建了一个页面 真正开发来讲 也不可能只创建几个界面这么简单 这里面的创建 还是非常完整的 这里 我创建一个文件夹 主要是做我们的项目目录 然后 我们在终端输入命令 然后 打开目录终…