栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 前沿技术 > 大数据 > 大数据系统

级联选择器(el-cascader)动态加载(lazyLoad)实现省市区三级选择

级联选择器(el-cascader)动态加载(lazyLoad)实现省市区三级选择


开开心心工作,兢兢业业生活


1. 需求:实现一个省市区的级联选择器,点击一级,动态加载下一级

那好,我们找个轮子



2. 他山之石(找个轮子)

Element UI 中国省市区级联数据

安装:

npm install element-china-area-data -S

使用:


 


预览:


回复:

领导: 不行,多余的包会影响加载速度,我们有自己的接口



3. 自给自足(用自己的接口)

请求接口,获取第一级内容(省份),点击省份项,请求数据,获取第二级内容(城市)并动态加载出来,点击城市,请求数据,动态加载第三级内容(区域)


Element UI 的 Demo:





核心:

// 理解 level 的目的和意义
const nodes = Array.from({ length: level + 1 })


3. 话不多说(直接组件封装)

组件:





父组件:




预览:



反思:

这个级联选择器不仅仅可以用在省市区的级联选择上,更可以面对庞大数据,做一个多层级选择菜单,实现数据的分级渲染
开开心心工作,认认真真生活~

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/773811.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号