当前位置：首页 > VUE

vue实现城市下拉

2026-01-19 07:27:58VUE

实现城市下拉选择功能

使用Vue实现城市下拉选择功能可以通过多种方式完成，以下是一个常见的实现方法：

基础实现方案

安装依赖（如需要）：

npm install element-ui

组件代码示例：

<template>
  <div>
    <el-select v-model="selectedCity" placeholder="请选择城市">
      <el-option
        v-for="city in cities"
        :key="city.value"
        :label="city.label"
        :value="city.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCity: '',
      cities: [
        { value: 'shanghai', label: '上海' },
        { value: 'beijing', label: '北京' },
        { value: 'guangzhou', label: '广州' },
        { value: 'shenzhen', label: '深圳' }
      ]
    }
  }
}
</script>

动态加载城市数据

对于大量城市数据，建议从后端API获取：

<script>
export default {
  data() {
    return {
      selectedCity: '',
      cities: [],
      loading: false
    }
  },
  created() {
    this.fetchCities()
  },
  methods: {
    async fetchCities() {
      this.loading = true
      try {
        const response = await axios.get('/api/cities')
        this.cities = response.data
      } catch (error) {
        console.error('获取城市数据失败:', error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

实现省市联动选择

更复杂的省市联动选择实现：

<template>
  <div>
    <el-select v-model="selectedProvince" placeholder="请选择省份">
      <el-option
        v-for="province in provinces"
        :key="province.value"
        :label="province.label"
        :value="province.value">
      </el-option>
    </el-select>

    <el-select v-model="selectedCity" placeholder="请选择城市" :disabled="!selectedProvince">
      <el-option
        v-for="city in filteredCities"
        :key="city.value"
        :label="city.label"
        :value="city.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      provinces: [
        { value: 'gd', label: '广东省' },
        { value: 'zj', label: '浙江省' }
      ],
      allCities: {
        gd: [
          { value: 'gz', label: '广州' },
          { value: 'sz', label: '深圳' }
        ],
        zj: [
          { value: 'hz', label: '杭州' },
          { value: 'nb', label: '宁波' }
        ]
      }
    }
  },
  computed: {
    filteredCities() {
      return this.selectedProvince ? this.allCities[this.selectedProvince] : []
    }
  }
}
</script>

自定义样式

如果需要自定义下拉样式：

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

<style>
.custom-select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  width: 200px;
}
</style>