省市区镇四级联动选择器：Vue+Element UI优雅实现

2023-01-09 17:47:24

使用 Vue.js 和 Element UI 实现省市区镇四级联动选择器

为什么选择 Vue.js 和 Element UI？

在前端开发中，级联选择器是一种广泛应用的元素，尤其是在涉及地址填写的场景中。Vue.js 作为一款轻量、灵活且易于上手的 JavaScript 框架，深受开发者的喜爱。而 Element UI 是一个基于 Vue.js 的组件库，提供了丰富的、美观且易用的组件，能够帮助开发者快速构建出高品质的前端界面。

实现步骤

1. 安装依赖

首先，你需要在你的项目中安装 Vue.js 和 Element UI。通过以下命令即可完成：

npm install vue element-ui

2. 创建 Vue 实例

接下来，创建 Vue 实例来管理你的应用程序：

const app = new Vue({
  el: '#app',
  data: {
    // 省市区镇数据
    provinces: [],
    cities: [],
    districts: [],
    towns: [],

    // 当前选中的省市区镇
    selectedProvince: '',
    selectedCity: '',
    selectedDistrict: '',
    selectedTown: '',
  },
});

3. 获取省市区镇数据

你可以通过 JSON 文件、数据库或第三方 API 获取省市区镇数据。无论采用何种方式，都需要将数据转换成 Vue.js 对象数组，以便在模板中使用。

4. 创建级联选择器

使用 Element UI 的级联选择器组件来构建省市区镇选择器：

<el-cascader
  v-model="selectedProvince"
  :options="provinces"
  @change="handleProvinceChange"
/>

<el-cascader
  v-model="selectedCity"
  :options="cities"
  @change="handleCityChange"
/>

<el-cascader
  v-model="selectedDistrict"
  :options="districts"
  @change="handleDistrictChange"
/>

<el-cascader
  v-model="selectedTown"
  :options="towns"
/>

5. 处理级联选择器变化事件

当用户选择不同的省市区镇时，需要更新相应的选项数据：

handleProvinceChange(province) {
  // 根据选中的省份获取城市数据
  this.cities = this.provinces.find(p => p.value === province).children;

  // 重置其他选择器的数据
  this.selectedCity = '';
  this.selectedDistrict = '';
  this.selectedTown = '';
}

handleCityChange(city) {
  // 根据选中的城市获取区县数据
  this.districts = this.cities.find(c => c.value === city).children;

  // 重置其他选择器的数据
  this.selectedDistrict = '';
  this.selectedTown = '';
}

handleDistrictChange(district) {
  // 根据选中的区县获取乡镇数据
  this.towns = this.districts.find(d => d.value === district).children;

  // 重置其他选择器的数据
  this.selectedTown = '';
}