用vue实现选择城市

实现选择城市功能

安装依赖

确保项目中已安装Vue及相关UI库（如Element UI或Vant）。以Element UI为例：

npm install element-ui

基础组件结构

在Vue组件中引入城市选择器组件或自定义实现：

<template>
  <div>
    <el-cascader
      v-model="selectedCity"
      :options="cityOptions"
      placeholder="选择城市"
    />
  </div>
</template>

数据准备

准备城市数据，可使用静态数据或动态获取：

data() {
  return {
    selectedCity: [],
    cityOptions: [
      {
        value: 'guangdong',
        label: '广东省',
        children: [
          { value: 'guangzhou', label: '广州市' },
          { value: 'shenzhen', label: '深圳市' }
        ]
      }
    ]
  }
}

动态加载数据

通过API获取城市数据：

methods: {
  async loadCities() {
    const response = await axios.get('/api/cities');
    this.cityOptions = response.data;
  }
},
mounted() {
  this.loadCities();
}

处理选择事件

添加选择完成后的处理逻辑：

watch: {
  selectedCity(newVal) {
    if (newVal.length > 0) {
      console.log('已选择城市:', newVal);
      // 后续业务逻辑
    }
  }
}

样式优化

根据需要调整选择器样式：

.el-cascader {
  width: 300px;
}

替代方案

使用第三方城市选择组件（如v-region）：

npm install v-region

<template>
  <v-region v-model="selectedCity" />
</template>
<script>
import VRegion from 'v-region'
export default {
  components: { VRegion }
}
</script>

注意事项

• 多级联选择时注意数据层级结构
• 移动端建议使用Vant等移动端UI库的Picker组件
• 大数据量城市列表建议添加搜索功能