Vue如何结合select2/vue-select实现国家-省份级联下拉选择

推荐优先使用vue-select实现，它是纯Vue生态的组件，不需要额外依赖jQuery，比select2更适配Vue项目，上手门槛更低。

前置操作 #

• 安装对应版本的组件：
  Vue2项目执行：npm install vue-select@3.20.0
  Vue3项目执行：npm install vue-select
• 在需要使用的页面引入组件和样式，局部注册即可，不需要全局注册。

完整可运行代码 #

<template>
    <div class="container">
        <div class="row" style="margin: 20px 0;">
            <div class="col-md-4">
                <label class="my-1 mr-2">国家</label>
                <v-select 
                  v-model="selectedCountry" 
                  :options="countryList" 
                  label="country" 
                  placeholder="请选择国家"
                  @input="loadStates"
                  class="form-control"
                ></v-select>
            </div>

            <div class="col-md-4 ">
                <label class="my-1 mr-2">省份/州</label>
                <v-select 
                  v-model="selectedState" 
                  :options="stateList" 
                  label="state" 
                  placeholder="请先选择国家"
                  :disabled="!selectedCountry"
                  class="form-control"
                ></v-select>
            </div>
        </div>
    </div>
</template>

<script>
// 引入vue-select组件和样式
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'
import axios from 'axios'

export default {
    // 注册组件
    components: {
        vSelect
    },
    data() {
        return {
            // 选中的国家对象
            selectedCountry: null,
            // 选中的省份
            selectedState: null,
            // 全量国家列表
            countryList: [],
            // 过滤后的对应国家省份列表
            stateList: [],
            // 全量省份列表，提前存在本地避免重复请求
            allStates: []
        }
    },
    created() {
        // 页面加载时先拉取国家和全量省份数据
        this.loadCountries()
        this.loadAllStates()
    },
    methods: {
        // 加载国家列表
        loadCountries() {
            axios.get('json/country.json')
                .then(res => this.countryList = res.data)
        },
        // 提前加载全量省份数据
        loadAllStates() {
            axios.get('json/states.json')
                .then(res => this.allStates = res.data)
        },
        // 选中国家后过滤对应省份
        loadStates() {
            // 清空之前选中的省份
            this.selectedState = null
            // 过滤当前选中国家对应的省份
            this.stateList = this.allStates.filter(item => {
                return item.country === this.selectedCountry.country
            })
        }
    }
}
</script>

<style scoped>
/* 可选：调整vue-select的高度和原生表单组件统一 */
::v-deep .vs__dropdown-toggle {
    min-height: 38px;
}
</style>

核心逻辑说明 #

• vue-select不需要手动写v-for循环渲染option，只需要通过options属性传入数组，label属性指定要显示的字段名即可，比原生select写法更简洁
• 选中国家后触发@input事件，直接从提前加载的全量省份数据里过滤匹配的条目，不需要重复发请求，性能更好
• 第二个下拉框通过disabled属性控制，没有选中国家时不可点击，交互更合理
• 如果需要保留原来每次选中国家都发请求拉取省份的逻辑，只需要修改loadStates方法的内容即可，和你之前的原生逻辑完全兼容

可选：基于select2实现的注意事项 #

如果必须使用select2，需要先安装jQuery和select2的依赖，然后封装成Vue组件使用，原理和上面的逻辑一致，只是组件的绑定事件和属性对应select2的配置即可，因为select2依赖jQuery，Vue项目里不推荐优先使用。

内容的提问来源于stack exchange，提问作者Liza