使用vue3+elementplus的级联选择器实现省市区联动（三级到五级）

最新推荐文章于 2025-04-16 18:31:55 发布

goto_w

最新推荐文章于 2025-04-16 18:31:55 发布

阅读量2.9k

点赞数 12

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_52696618/article/details/138325470

版权

本文介绍了一个名为province-city-china的GitHub项目，用于在Vue应用中实现中国行政区划数据的动态选择。通过npm安装库并集成到一个Cascader组件中，可以方便地查询各级别的地区数据，如省份、城市、区县和乡镇。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

中华人民共和国行政区划代码

github地址：https://github.com/uiwjs/province-city-china

中华人民共和国行政区划（五级）：省级、地级、县级、乡级和村级。来自中华人民共和国民政部，用于查询中国省，市和区数据的网站。

安装

npm install province-city-china --save-dev

使用

const { data, province, city, area, town } = require(‘province-city-china/data’);

代码实现

<template>
  <div>
    <el-cascader v-model="value" :options="options" @change="handleChange" />
  </div>
</template>

<script setup>
import {
    ref, onMounted } from 'vue'
import data from 'province-city-china/dist/level.json'

const value = ref([])
const options = ref([])

const handleChange = (value) => {
   
  console.log(value)
}
const dataList = data

const getAreaCode = (nodeId) =>