ElementUI | 实现级联选择器实现省市区街道四级联动

实现效果

ElementUI | 实现级联选择器实现省市区街道四级联动_第1张图片

实现步骤

1. 下载数据

城市数据-github主页

ElementUI | 实现级联选择器实现省市区街道四级联动_第2张图片

2. 导入数据

新建一个文件夹 存放json数据 , 这里我把文件名字修改成了 city.json , 原本的是 pcas-code.json
ElementUI | 实现级联选择器实现省市区街道四级联动_第3张图片
然后新建一个 js 文件读取数据并导出为 对象, 代码比较简单, 我就不放在下面了 , 注意路径!

ElementUI | 实现级联选择器实现省市区街道四级联动_第4张图片

3. 在页面中使用

先在需要的页面中导入
ElementUI | 实现级联选择器实现省市区街道四级联动_第5张图片
然后赋值给 相应的属性 作为级联选择器的数据源

ElementUI | 实现级联选择器实现省市区街道四级联动_第6张图片
在 级联选择器上配置 相应的数据

ElementUI | 实现级联选择器实现省市区街道四级联动_第7张图片
需要根据配置来制定相应的 value 和 label

ElementUI | 实现级联选择器实现省市区街道四级联动_第8张图片

注意事项

  1. 我上面的步骤没有给出 导入级联选择器组件的步骤, 所以 需要自己导入
  2. 这个只是简单的实现, 效率比较低, 实际使用需要自己优化, 我是着急把项目写完, 懒得整了

你可能感兴趣的:(前端日志,vue,级联选择器)