vue地区选择器（到乡镇，到区，到市）

最新推荐文章于 2025-06-05 17:14:26 发布
原创 最新推荐文章于 2025-06-05 17:14:26 发布 · 1.6k 阅读 · 21 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

在现代 Web 开发中，用户体验至关重要，而表单的设计常常是提升体验的关键环节之一。随着 Vue.js 的广泛应用，许多开发者开始寻求简洁、高效的方式来处理复杂的选择输入，特别是在需要用户选择地区信息的场景下。

想象一下，当用户在一个表单中需要准确选择省、市、区、乡镇等层级的地址时，一个直观易用的地区选择器将会极大地提升用户的操作便捷性。通过使用 Vue 及其生态系统中的组件库，比如 Element Plus，我们可以轻松实现一个层级清晰、交互友好的地区选择器界面。

本文将带您深入了解如何在 Vue 应用中构建一个地区选择器，从最顶层的省份到最底层的乡镇。我们将涵盖组件的实现、数据管理和样式美化等多个维度，帮助您不仅能实现基本功能，还能提升用户体验，让用户在选择地区时流畅而开心。

无论你是 Vue 开发新手还是有一定经验的开发者，这篇文章都将为你提供实用的知识和技巧，帮助你打造更加出色的用户界面。接下来，让我们一起开始这个旅程吧！

第一步 下载  element-china-area-data

npm install element-china-area-data

这里选择element plus的级联选择器，所以没有安装element plus的

npm install element-plus
  • 第一个选择到乡镇的数据需要我们自己下载 因为博主也是找了好久有没有现成的数据 
下载地址

下载之后将导入到项目中，博主这里是导入到 assets文件夹里，大家也可以修改，但是不在assets里的话，在RegionView.vue导入时要修改导入路径

新建一个页面 RegionView.vue

<template>
  <div>
    <div class="cascader-container">
      <h2 class="title">到乡镇选择地区</h2>
      <el-cascader
          :options="options"
          :props="{ checkStrictly: true, value: 'code', label: 'name' }"
          ref="cascaderAddr"
          v-model="selectedOptions"
          @change="handleChange"
          clearable
          class="cascader"
      >
        <template #default="{ node, data }">
          <span>{{ data.name }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
      </el-cascader>
      <div class="address-info">
        <div class="info-item">地区编码：<strong>{{ addrCodes.join(',') }}</strong></div>
        <div class="info-item">地区：<strong>{{ addrCodesSelected.join('') }}</strong></div>
      </div>
    </div>
    <div class="cascader-container">
      <h2 class="title">到区选择地区</h2>
      <el-cascader
          size="large"
          :options="regionData"
          @change="handleChange1"
          class="cascader"
          v-model="selectedOptions1">
      </el-cascader>
      <div class="address-info">
        <div class="info-item">地区编码：<strong>{{ temp.areaCode.join(',') }}</strong></div>
        <div class="info-item">地区：<strong>{{ temp.areaName.join('') }}</strong></div>
      </div>
    </div>
    <div class="cascader-container">
      <h2 class="title">到市选择地区</h2>
      <el-cascader
          size="large"
          :options="provinceAndCityData"
          @change="handleChange2"
          class="cascader"
          v-model="selectedOptions2">
      </el-cascader>
      <div class="address-info">
        <div class="info-item">地区编码：<strong>{{ areaCode.join(',') }}</strong></div>
        <div class="info-item">地区：<strong>{{ areaName.join('') }}</strong></div>
      </div>
    </div>
  </div>

</template>

<script>
let pcas = require('@/assets/pcas-code.json');
import {regionData,provinceAndCityData ,codeToText} from 'element-china-area-data';
export default {
  name: 'RegionView',
  data() {
    return {
      options: pcas,
      provinceAndCityData,
      selectedOptions: [],
      addrCodes: [],
      addrCodesSelected: [],
      regionData,
      codeToText,
      selectedOptions1: [],
      selectedOptions2: [],
      temp: {
        areaName: [],
        areaCode: []
      },
      areaName: [],
      areaCode: []
    };
  },
  methods: {
    // 获取省市区地址级联
    handleChange() {
      const thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0];
      if (thsAreaCode) {
        this.addrCodes = thsAreaCode.path;
        this.addrCodesSelected = thsAreaCode.pathLabels;
        console.log(this.addrCodesSelected);
      } else {
        this.addrCodes = [];
        this.addrCodesSelected = [];
      }
    },
    handleChange1() {
      this.temp.areaName=[]
      this.temp.areaCode=[]
      if (this.selectedOptions1[0] != null && this.selectedOptions1[1] != null && this.selectedOptions1[2] != null) {
        for (let i = 0; i < 3; i++) {
          this.temp.areaName.push(this.codeToText[this.selectedOptions1[i]])
          this.temp.areaCode.push(this.selectedOptions1[i])
        }
      }
      console.log(this.temp)
    },
    handleChange2() {
      this.areaName=[]
      this.areaCode=[]
      if (this.selectedOptions2[0] != null && this.selectedOptions2[1] != null) {
        for (let i = 0; i < 2; i++) {
          this.areaName.push(this.codeToText[this.selectedOptions2[i]])
          this.areaCode.push(this.selectedOptions2[i])
        }
      }
    }
  }
};
</script>

<style scoped>
.cascader-container {
  max-width: 500px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

.cascader {
  width: 100%;
}

.address-info {
  margin-top: 20px;
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;
}

.info-item {
  margin: 5px 0;
  font-size: 16px;
}
</style>

这里为了方便查看效果，所以样式居中显示，样式根据自己需求修改，也可以封装成单独组件

第二步封装成单独组件

，需要选择到哪一级，就选择相应的组件 将地区选择器封装成三个独立的组件，可以使代码更具可复用性和可维护性。每个组件可以专注于处理不同层级的地区选择（乡镇、区和市）。以下是对代码的重构，包括三个独立的组件以及父组件的整合。

1. 地区选择器组件结构

  • TownSelector.vue：用于选择乡镇
  • DistrictSelector.vue：用于选择区
  • CitySelector.vue：用于选择市
  • RegionView.vue：父组件，整合上述三个选择器
TownSelector.vue
<template>
  <div class="cascader-container">
    <h2 class="title">到乡镇选择地区</h2>
    <el-cascader
      :options="options"
      :props="{ checkStrictly: true, value: 'code', label: 'name' }"
      v-model="selectedOptions"
      @change="handleChange"
      clearable
      class="cascader"
    >
      <template #default="{ node, data }">
        <span>{{ data.name }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      </template>
    </el-cascader>
    <div class="address-info">
      <div class="info-item">地区编码：<strong>{{ addrCodes.join(',') }}</strong></div>
      <div class="info-item">地区：<strong>{{ addrCodesSelected.join('') }}</strong></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    selectedOptions: Array,
    addrCodes: Array,
    addrCodesSelected: Array,
    onChange: Function
  },
  methods: {
    handleChange() {
      const thsAreaCode = this.$refs.cascaderAddr.getCheckedNodes()[0];
      if (thsAreaCode) {
        this.addrCodes = thsAreaCode.path;
        this.addrCodesSelected = thsAreaCode.pathLabels;
        this.onChange(this.addrCodes, this.addrCodesSelected);
      } else {
        this.addrCodes = [];
        this.addrCodesSelected = [];
      }
    }
  }
};
</script>

<style scoped>
.cascader-container {
  max-width: 500px;
  margin: 20px auto;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}
.cascader {
  width: 100%;
}
.address-info {
  margin-top: 20px;
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;
}
.info-item {
  margin: 5px 0;
  font-size: 16px;
}
</style>
DistrictSelector.vue
<template>
  <div class="cascader-container">
    <h2 class="title">到区选择地区</h2>
    <el-cascader
      size="large"
      :options="regionData"
      v-model="selectedOptions"
      @change="handleChange"
      clearable
      class="cascader"
    >
    </el-cascader>
    <div class="address-info">
      <div class="info-item">地区编码：<strong>{{ temp.areaCode.join(',') }}</strong></div>
      <div class="info-item">地区：<strong>{{ temp.areaName.join('') }}</strong></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    regionData: Array,
    selectedOptions: Array,
    codeToText: Object,
    onChange: Function
  },
  data() {
    return {
      temp: {
        areaName: [],
        areaCode: []
      }
    };
  },
  methods: {
    handleChange() {
      this.temp.areaName = [];
      this.temp.areaCode = [];
      if (this.selectedOptions.length > 0) {
        this.selectedOptions.forEach((code) => {
          this.temp.areaName.push(this.codeToText[code]);
          this.temp.areaCode.push(code);
        });
        this.onChange(this.temp.areaName, this.temp.areaCode);
      }
    }
  }
};
</script>

<style scoped>
.cascader-container {
  max-width: 500px;
  margin: 20px auto;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}
.cascader {
  width: 100%;
}
.address-info {
  margin-top: 20px;
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;
}
.info-item {
  margin: 5px 0;
  font-size: 16px;
}
</style>
CitySelector.vue
<template>
  <div class="cascader-container">
    <h2 class="title">到市选择地区</h2>
    <el-cascader
      size="large"
      :options="provinceAndCityData"
      v-model="selectedOptions"
      @change="handleChange"
      clearable
      class="cascader"
    >
    </el-cascader>
    <div class="address-info">
      <div class="info-item">地区编码：<strong>{{ areaCode.join(',') }}</strong></div>
      <div class="info-item">地区：<strong>{{ areaName.join('') }}</strong></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    provinceAndCityData: Array,
    selectedOptions: Array,
    codeToText: Object,
    onChange: Function
  },
  data() {
    return {
      areaName: [],
      areaCode: []
    };
  },
  methods: {
    handleChange() {
      this.areaName = [];
      this.areaCode = [];
      if (this.selectedOptions.length > 0) {
        this.selectedOptions.forEach((code) => {
          this.areaName.push(this.codeToText[code]);
          this.areaCode.push(code);
        });
        this.onChange(this.areaName, this.areaCode);
      }
    }
  }
};
</script>

<style scoped>
.cascader-container {
  max-width: 500px;
  margin: 20px auto;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}
.cascader {
  width: 100%;
}
.address-info {
  margin-top: 20px;
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;
}
.info-item {
  margin: 5px 0;
  font-size: 16px;
}
</style>
RegionView.vue
<template>
  <div>
    <TownSelector
      :options="options"
      v-model="selectedOptions"
      :addrCodes="addrCodes"
      :addrCodesSelected="addrCodesSelected"
      :onChange="updateAddressInfo"
    />
    <DistrictSelector
      :regionData="regionData"
      v-model="selectedOptions1"
      :codeToText="codeToText"
      :onChange="updateDistrictInfo"
    />
    <CitySelector
      :provinceAndCityData="provinceAndCityData"
      v-model="selectedOptions2"
      :codeToText="codeToText"
      :onChange="updateCityInfo"
    />
  </div>
</template>

<script>
import TownSelector from './TownSelector.vue';
import DistrictSelector from './DistrictSelector.vue';
import CitySelector from './CitySelector.vue';
let pcas = require('@/assets/pcas-code.json');
import { regionData, provinceAndCityData, codeToText } from 'element-china-area-data';

export default {
  name: 'RegionView',
  components: {
    TownSelector,
    DistrictSelector,
    CitySelector
  },
  data() {
    return {
      options: pcas,
      provinceAndCityData,
      selectedOptions: [],
      addrCodes: [],
      addrCodesSelected: [],
      regionData,
      codeToText,
      selectedOptions1: [],
      selectedOptions2: []
    };
  },
  methods: {
    updateAddressInfo(codes, names) {
      this.addrCodes = codes;
      this.addrCodesSelected = names;
    },
    updateDistrictInfo(names, codes) {
      console.log('District Updated:', names, codes);
    },
    updateCityInfo(names, codes) {
      console.log('City Updated:', names, codes);
    }
  }
};
</script>

<style scoped>
/* 可选的全局样式 */
</style>
  • TownSelector.vue：处理乡镇的选择，获取编码和地区名称。
  • DistrictSelector.vue：处理区的选择，获取编码及地区名称。
  • CitySelector.vue：处理市的选择，获取编码和地区名称。
  • RegionView.vue：父级组件，整合三个选择器组件，并管理数据的传递和更新。

总结

将地区选择器拆分为不同的组件，使得逻辑更加清晰，代码结构更易于维护与扩展，符合组件化开发的最佳实践。这样也有助于将来根据需要复用某个选择器组件

管华尔
关注
vue2 - elementUI全国城市列表选择器组件，提供省市区联动选择器、选择地址省市区级联、复选框tree树状省份全部列出来勾选，支持数据懒加载节点动态加载（附带全国省市区县乡镇村json数据）
高级前端工程师
09-22 4493
vue2，element ui，城市选择器，省市区联动选择，Tree树组件列出省名称，全国省份列表，展开下级多级，vue2 elementUI实现省市区选择联动，地区选择器，把所有省份都展示出来，选择多个城市，省市区三级联动选择器，省市区json数据，树结构的城市列表，vue省市区tree树形级联，ElementUI级联和树形省市区，组件tree实现省市多级联动，vue省市区三级联动选择器，选择地址，选择地区，选择多个省市区、批量选择城市，选择当前位置，省市区数据懒加载，动态加载城市数据，插件，地址选择器组
vue3 - elementPlus全国城市列表选择器，提供省市区联动选择器、选择地址省市区级联、复选框tree树状省份全部列出来勾选，支持数据懒加载节点动态加载（附带全国省市区县乡镇村json数据）
高级前端工程师
09-22 4546
vue3，element-plus，Element Plus级联和树形省市区，组件tree实现省市多级联动，vue3省市区三级联动选择器，选择地址，选择地区，选择多个省市区、批量选择城市，选择当前位置，省市区数据懒加载，动态加载城市数据，插件，地址选择器组件，城市选择器，省市区联动选择，Tree树组件列出省名称，树结构的城市列表，vue3省市区tree树形级联，全国省份列表，展开下级多级，vue3 element实现省市区选择联动，地区选择器，把所有省份都展示出来，选择多个城市，省市区三级联动选择器，省市区
百度地图地区选择器
04-23
百度地图地区选择器，本来要设置资源分为0的，不知道怎么设置，最低是2分
省市区级联选择器
最新发布
zichenblog的博客
06-05 818
"上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "浦东新区", "闵行区", "宝山区", "嘉定区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]"北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "顺义区", "通州区", "大兴区", "房山区", "门头沟区", "昌平区", "平谷区", "密云区", "延庆区"]
vue 地址区域选择组件
强哥叨逼叨
08-28 1万+
项目中用到了地址区域选择，自己写了一个，效果如下： 组件代码： &lt;template&gt; &lt;div&gt; &lt;i-input @on-focus="areaFocus" @on-blur="areaBlur" placeholder="请选择地址" v-model="formObj[formPropNa.
VUE-地区选择器(V-Distpicker)
热门推荐
TA的博客
01-09 2万+
V - Distpicker 地区选择器 环境问题不多说,自己看文档,主要讲一下在实际使用过程中如何将下拉框的值赋值到对象属性上. 文档: https://distpicker.iline.co/ github: https://github.com/jcc/v-distpicker 项目运用: 1.表单 ... "地区"> "user.xtrysf" :c
地区选择器
weixin_46178009的博客
11-24 833
按照首字母排序
vue省市区/县数据js文件（citydata.js）
07-10
在提供的文件"citydata.js"中，包含的是全国省市区/县的JSON数据，这种数据结构通常用于构建级联选择器，例如下拉列表或者级联菜单，用户可以选择他们的地址或者进行地理位置相关的操作。 首先，让我们了解一下什么...
省市区镇 级联 js vue
06-07
省市区镇 级联 js vue 省市区镇 级联 js vue 省市区镇 级联 js vue
vue、四级联动（省市区街道）
01-07
npm i --save area-linkage-vue area-data-vue 2、引入： import Vue from 'vue'; import { pcaa } from 'area-data-vue'; import 'area-linkage-vue/dist/index.css'; import AreaLinkageVue from 'area-...
vue地区选择组件教程详解
11-26
概述 主要用于全国地区数据的操作，包括省，市，区三级联动，地区数据的添加和删除； 在操作地区数据时，以前也用过树形的地区选择组件，但因其在再操作大量的地区数据时，渲染缓慢，所以我们就换了另一种数据展示形式和交互形式，从而就有了这个组件。 注意：该组件是 vue.js 组件 demo 抢鲜体验请点击这里 demo API Props 参数 类型 说明 area Array 传入组件的地区的数据 Events 事件名 参数 说明 selected area 组件中选中的地区 详细说明 Props area area 参数是必选项，表示组件初始化时的地区数据，
城市选择器 地区选择器
05-05
非常精简漂亮的城市选择器，欢迎大家前来下载，代码方便阅读，操作性强
区域选择器
WATERFALL_的博客
03-21 739
详情参考以下链接移动端：http://www.jq22.com/jquery-info16748  PC端：http://www.jq22.com/jquery-info4053
【亲测免费】 探秘简洁而强大的 Vue 地区选择器——v-region
gitblog_00047的博客
05-16 1184
探秘简洁而强大的 Vue 地区选择器——v-region 当你在开发需要涉及中国地区选择的项目时，是否曾经因为行政区划数据的复杂性而感到困扰？不用担心，我们为你找到了一个完美的解决方案——v-region。这是一个专为Vue框架设计的简洁且功能全面的中国地区选择器，提供从“省/直辖市”到“乡/镇/街道”的四级行政区域选择。 项目介绍 v-region是一个基于Vue 3的组件库，它不仅包含了最新的...
【亲测免费】 Vue 区域选择器 - `vue-region-picker` 使用指南
gitblog_00759的博客
08-13 717
Vue 区域选择器 - vue-region-picker 使用指南 项目介绍 vue-region-picker 是一个基于 Vue.js 的区域选择器组件，它专为选择中国行政区划而设计。此组件轻量且灵活，便于集成到任何 Vue 应用中，提供了多级选择功能，支持单选或多选模式，非常适合处理地址相关的表单输入。 项目快速启动 安装 首先，确保你的开发环境中已安装了 Vue。然后，可以通过以下命令将...
【亲测免费】 探索高效便捷的地区选择器：vue-region-picker
gitblog_01009的博客
08-15 564
探索高效便捷的地区选择器：vue-region-picker 在现代Web开发中，地区选择器是一个常见但不可或缺的组件。无论是电商平台的地址填写，还是社交应用的地区筛选，一个高效、易用的地区选择器都能显著提升用户体验。今天，我们要介绍的就是这样一个开源项目——vue-region-picker，一个专为Vue.js开发者设计的地区选择组件。 项目介绍 vue-region-picker是一个Vue...
vue3 地区选择器
2301_79886516的博客
04-02 439
1.安装element-plus。2.在main.ts引入注册。
实现五级联动的省市区热点选择器
在地理信息系统中，四级联动通常指的是一个下拉列表（或者选择器）的联动，其中包含了国家级别（如国家）、省级别（如省、直辖市）、市级别（如市）和区县级别（如区、县）。用户在选择上一级的选项后，下一级的选项...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值