基于vue+element ui实现省市区三个下拉框联动 |
您所在的位置：网站首页 › vue实现多级联动选择 › 基于vue+element ui实现省市区三个下拉框联动 |
基于vue+element ui实现省市区三个下拉框联动
|
1.下载省市区数据的插件
npm install element-china-area-data -S
2.在script中引入
import { regionData } from "../../node_modules/element-china-area-data";
在这里我只用到regionData(省市区三级联动数据且不带 "全部" 字样选项)，需要其他数据的可以按需引入。 element-china-area-data 插件主要分成四种展示格式： provinceAndCityDataprovinceAndCityDataPlusregionDataregionDataPlus1. provinceAndCityData 是省市两级联动数据且不带 "全部" 字样选项。 2. provinceAndCityDataPlus 是省市两级联动数据且显示 "全部" 字样选项。 3. regionData 是省市区三级联动数据且不带 "全部" 字样选项。 4. regionDataPlus 是省市区三级联动数据且显示 "全部" 字样选项。 3.代码 data() { return { //省市区联动下拉框 provinces: regionData, cities: [], area: [], selectProvince: "", selectCity: "", selectArea: "", methods: { changeProvince() { //console.log(this.provinces) //console.log(this.selectProvince) this.cities = []; this.area = []; this.selectCity = ""; this.selectArea = ""; let cityItem = this.provinces.filter( (item) => item.value === this.selectProvince ); if (cityItem[0]) { this.cities = cityItem[0].children; } }, changeCity() { console.log("城市选择") console.log(this.selectCity) this.area = []; this.selectArea = ""; let areaItem = this.cities.filter( (item) => item.value === this.selectCity ); if (areaItem[0]) { this.area = areaItem[0].children; } }, }, 4.最终效果
|
【本文地址】
今日新闻 |
推荐新闻 |