VUE：快速实现一个省市区的级联选择器

最新推荐文章于 2024-08-01 15:15:14 发布

前端-如此如此。

最新推荐文章于 2024-08-01 15:15:14 发布

阅读量4.1k

点赞数 1

分类专栏： web前端之VUE

本文链接：https://blog.csdn.net/weixin_44136505/article/details/106236907

版权

本文介绍如何在Vue项目中快速创建一个省市区级联选择器。通过准备全国地址JSON数据，全局引入Element UI框架，然后在页面中加载数据并结合HTML与JS方法实现。文章提供了一个实用的技术指南，并鼓励读者点赞和交流。

摘要由CSDN通过智能技术生成

简介

项目中，大概率会有选择地址的需求，但是在没有组件可用的情况下，就需要自己实现一个，接下来就以VUE项目为基础进行实操。

具体实现

第一步：准备一个全国地址的json文件（上级包含下级的从属关系数据，符合element-ui的select选择器数据要求）。
这里有下载链接
第二步：全局引入element-ui框架。
第三步：页面中引入json文件。
第四步：写好html与JS方法

<template>
  <div>
    <el-select v-model="formData.provinceCode" @change="provinceChange" placeholder="省">
      <el-option v-for="it in provinces" :key="it.value" :label="it.label" :value="it.value"></el-option>
    </el-select>
    <el-select v-model="formData.cityCode" @change="cityChange" placeholder="市" class="address_select">
      <el-option v-for="it in cityList" :key="it.value" :label="it.label" :value=