前言 在工作中遇到省市县三级联动的需求&#xff0c;传统的pc端大部分是用3个HTML <select>标签根据选中的一级地址去获取二级地址&#xff0c;然后根据二级地址去获取三级地址。实现省市县三级地址选择&#xff0c;需要2次服务端请求。这里使用mint--ui的Popup弹出框组件…

目录 抛出问题 解决思路 实际效果 完整代码 优化&#xff1a;封装成组件VirtualTree 其他地方使用 附&#xff1a;源数据 抛出问题 使用一般的tree组件渲染大量数据&#xff08;如几千个树节点&#xff09;的时候会非常卡顿&#xff0c;主要原因是页面中绘制的大量的D…

思路&#xff1a; 数据设计&#xff1a;省份为一维数组&#xff0c;一级市为二维数组&#xff0c;二级市/区/县为三维数组。这样设计的好处在于根据数组索引实现数据的关联。 UI组件&#xff1a; MUI的DropDownMenu组件或Select Field组件。将省市县数据定位常量&#xff0c;在…

需求&#xff1a;可以搜索出符合关键字的全部节点&#xff0c;搜索出的节点可以继续懒加载。 实现方式&#xff1a;后端把符合关键字的节点组装成树结构返回给前端&#xff0c;前端使用packages/tree/src/model/node.js中Node类的doCreateChildren方法手动渲染树结构&#xff0…

通过本篇文章小伙伴们能学到什么&#xff1f;我简单的总结了一下大概有以下几点。 了解到鸿蒙Next 自定义弹窗 的核心用法。了解到 实现级联选择的实现思路和过程&#xff0c;不仅限于鸿蒙&#xff0c;也适用于其他框架和场景。了解到鸿蒙Next中如何封装自己的自定义组件。了解…

示例图&#xff1a; 正文部分 一、组件的注册 二、组件使用 1.在需要使用组件的josn文件中注册 2.在js文件中引入相关地址的js文件 3.js主要代码 4.html部分 5.cityData.js文件&#xff08;部分&#xff09; 一、组件的注册 在文件目录下components里创建select小程序组…

前言 级联选择不少组件都有&#xff0c;但是如果是选地区&#xff0c;大部分的组件需要提供的数据就变得要求数据带children以获得下级选项。如果不能复制粘贴&#xff0c;那还不如自己写个地区级联选择组件。 数据 我在网上翻到一个数据接口提供的中国省市区数据接口地址。…

首先呈现效果图 1.我的是通过element-ui实现的&#xff1b;可自由选择UI 2.话不多说&#xff0c;直接上代码&#xff0c;结构非常简单 1 2 3 一:vue实现城市联动选择4 5 6 一:可清除输入框记录7 8 9 11 v-model"form.selectedOptions" 12 :change-on-select&q…