当前位置：首页 > VUE

vue实现地区控件

2026-01-21 12:35:48VUE

Vue 地区控件实现方法

基于 Element UI 的 Cascader 组件

安装 Element UI 依赖：

npm install element-ui

在 Vue 项目中注册组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-charter/index.css'

Vue.use(ElementUI)

模板部分代码：

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

数据与逻辑部分：

export default {
  data() {
    return {
      selectedOptions: [],
      options: [{
        value: 'beijing',
        label: '北京',
        children: [{
          value: 'haidian',
          label: '海淀区'
        }, {
          value: 'chaoyang',
          label: '朝阳区'
        }]
      }]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}

使用第三方地区数据

安装地区数据包：

npm install china-area-data

组件实现：

import { province, city, area } from 'china-area-data'

export default {
  data() {
    return {
      provinces: province,
      cities: [],
      areas: [],
      selectedProvince: '',
      selectedCity: '',
      selectedArea: ''
    }
  },
  watch: {
    selectedProvince(val) {
      this.cities = city[val] || []
      this.selectedCity = ''
      this.selectedArea = ''
    },
    selectedCity(val) {
      this.areas = area[val] || []
      this.selectedArea = ''
    }
  }
}

自定义递归组件实现

创建地区组件：

<template>
  <div>
    <select v-model="selectedProvince" @change="loadCities">
      <option value="">选择省份</option>
      <option v-for="p in provinces" :value="p.code">{{ p.name }}</option>
    </select>

    <select v-model="selectedCity" @change="loadAreas">
      <option value="">选择城市</option>
      <option v-for="c in cities" :value="c.code">{{ c.name }}</option>
    </select>

    <select v-model="selectedArea">
      <option value="">选择区县</option>
      <option v-for="a in areas" :value="a.code">{{ a.name }}</option>
    </select>
  </div>
</template>

异步加载地区数据

使用 axios 获取远程数据：

methods: {
  async loadProvinces() {
    const response = await axios.get('/api/provinces')
    this.provinces = response.data
  },
  async loadCities() {
    if (!this.selectedProvince) return
    const response = await axios.get(`/api/cities?province=${this.selectedProvince}`)
    this.cities = response.data
  }
}