当前位置: 首页 > 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("树被点击时调用事件")},

 

http://www.lryc.cn/news/208945.html

相关文章:

  • Power BI 实现日历图,在一张图中展示天、周、月数据变化规律
  • C/C++计算表达式值 2020年12月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析
  • XTU-OJ 1258-矩阵
  • Django token 认证原理与实战
  • JVM虚拟机:Java对象的头信息有什么?
  • 场效应管器件
  • javascript之for循环介绍
  • 【机器学习可解释性】3.部分依赖图
  • 在CARLA中手动开车,添加双目相机stereo camera,激光雷达Lidar
  • 【VUE】ArcoDesign之自定义主题样式和命名空间
  • TVRNet网络PyTorch实现
  • opencv之坑(八)——putText中文乱码解决
  • nrf52832 开发板入手笔记:资料搜集
  • PHP如何批量修改二维数组中值
  • Python 算法高级篇:归并排序的优化与外部排序
  • LeetCode--1991.找到数组的中间位置
  • 物联网数据采集网关连接设备与云平台的关键桥梁
  • 专家级数据恢复:UFS Explorer Professional Recovery Crack
  • 2023/10/23 mysql学习
  • 软考系统架构师知识点集锦六:项目管理
  • MacOS系统Chrome开发者模式下载在线视频
  • uniapp v3+ts 使用 u-upload上传图片以及视频
  • 为什么虚拟dom会提高性能?
  • 2015年亚太杯APMCM数学建模大赛A题海上丝绸之路发展战略的影响求解全过程文档及程序
  • js中HTMLCollection如何循环
  • Kafka - 3.x 副本不完全指北
  • 二分归并法将两个数组合并
  • ROS自学笔记十六:URDF优化_xacro文件
  • XMLHttpRequest拦截请求和响应
  • 前端 读取/导入 Excel文档