开开心心工作,兢兢业业生活
1. 需求:实现一个省市区的级联选择器,点击一级,动态加载下一级
那好,我们找个轮子
2. 他山之石(找个轮子)
Element UI 中国省市区级联数据
安装:
npm install element-china-area-data -S
使用:
预览:
回复:
领导: 不行,多余的包会影响加载速度,我们有自己的接口
3. 自给自足(用自己的接口)
请求接口,获取第一级内容(省份),点击省份项,请求数据,获取第二级内容(城市)并动态加载出来,点击城市,请求数据,动态加载第三级内容(区域)
Element UI 的 Demo:
核心:
// 理解 level 的目的和意义
const nodes = Array.from({ length: level + 1 })
3. 话不多说(直接组件封装)
组件:
父组件:
预览:
反思:
这个级联选择器不仅仅可以用在省市区的级联选择上,更可以面对庞大数据,做一个多层级选择菜单,实现数据的分级渲染
开开心心工作,认认真真生活~



