1.下载省市区数据的插件
npm install element-china-area-data -S
2.在script中引入
import { regionData } from "../../node_modules/element-china-area-data";
在这里我只用到regionData(省市区三级联动数据且不带 "全部" 字样选项),需要其他数据的可以按需引入。
element-china-area-data 插件主要分成四种展示格式:
- provinceAndCityData
- provinceAndCityDataPlus
- regionData
- regionDataPlus
1. provinceAndCityData 是省市两级联动数据且不带 "全部" 字样选项。
2. provinceAndCityDataPlus 是省市两级联动数据且显示 "全部" 字样选项。
3. regionData 是省市区三级联动数据且不带 "全部" 字样选项。
4. regionDataPlus 是省市区三级联动数据且显示 "全部" 字样选项。
3.代码
<el-form>
<el-form-item label="地区" :label-width="formLabelWidth">
<el-select
v-model="selectProvince"
placeholder="请选择省"
style="width: 145px"
>
<el-option
v-for="item in provinces"
size="small"
:key="item.value"
:label="item.label"
:value="item.value"
@click.native="changeProvince()"
>
</el-option>
</el-select>
<el-select
v-model="selectCity"
placeholder="请选择市"
style="width: 145px"
>
<el-option
v-for="item in cities"
size="small"
:key="item.value"
:label="item.label"
:value="item.value"
@click.native="changeCity"
>
</el-option>
</el-select>
<el-select
v-model="selectArea"
placeholder="请选择区"
style="width: 145px"
>
<el-option
v-for="item in area"
size="small"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-form>
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.最终效果