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

级联选择器(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.051e.com
本文地址:http://www.051e.com/it/773811.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 ©2023-2025 051e.com

ICP备案号:京ICP备12030808号