vue实现城市选项

实现城市选择功能

使用Vue实现城市选择功能可以通过下拉菜单、级联选择器或自定义组件完成。以下是几种常见实现方式：

使用Element UI级联选择器

安装Element UI后，可直接使用Cascader组件实现省市联动：

<template>
  <el-cascader
    v-model="selectedCities"
    :options="cityOptions"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedCities: [],
      cityOptions: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            { value: 'chaoyang', label: '朝阳区' },
            { value: 'haidian', label: '海淀区' }
          ]
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            { value: 'pudong', label: '浦东新区' },
            { value: 'xuhui', label: '徐汇区' }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

使用原生select实现

对于简单需求，可用原生select元素配合v-model：

<template>
  <select v-model="selectedCity">
    <option v-for="city in cities" :value="city.value" :key="city.value">
      {{ city.label }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedCity: '',
      cities: [
        { value: 'bj', label: '北京' },
        { value: 'sh', label: '上海' },
        { value: 'gz', label: '广州' }
      ]
    }
  }
}
</script>

使用第三方城市数据

推荐使用china-area-data等专业数据包：

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

export default {
  data() {
    return {
      provinces: Object.keys(province).map(code => ({
        code,
        name: province[code]
      })),
      cities: [],
      areas: []
    }
  },
  methods: {
    onProvinceChange(provinceCode) {
      this.cities = Object.keys(city[provinceCode]).map(code => ({
        code,
        name: city[provinceCode][code]
      }))
    }
  }
}

自定义城市选择组件

创建可复用的城市选择组件：

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

    <select v-model="selectedCity" :disabled="!cities.length">
      <option value="">选择城市</option>
      <option v-for="c in cities" :value="c.code" :key="c.code">
        {{ c.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      provinces: [],
      cities: []
    }
  },
  created() {
    this.loadProvinces()
  },
  methods: {
    loadProvinces() {
      // 加载省份数据
    },
    loadCities() {
      // 根据省份加载城市数据
    }
  }
}
</script>

实现搜索过滤功能

为大型城市列表添加搜索功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索城市" />
    <ul>
      <li 
        v-for="city in filteredCities" 
        :key="city.id"
        @click="selectCity(city)"
      >
        {{ city.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      allCities: [
        { id: 1, name: '北京' },
        { id: 2, name: '上海' }
      ]
    }
  },
  computed: {
    filteredCities() {
      return this.allCities.filter(city => 
        city.name.includes(this.searchQuery)
      )
    }
  },
  methods: {
    selectCity(city) {
      this.$emit('input', city)
    }
  }
}
</script>

以上方案可根据项目需求选择或组合使用，Element UI方案适合快速开发，自定义组件方案灵活性更高。