方法一:el-select
<el-row :gutter="22">
<el-col :span="7">
<el-form-item label="省">
<el-select v-model="userForm.provinceId" placeholder="请选择" @change="queryProvinceDownCityList()">
<el-option v-for="(item,index) in provinceList" :label="item.cityname" :selected="item.id==userForm.provinceId" :value="item.id" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="市">
<el-select v-model="userForm.cityId" placeholder="请选择" @change="queryCityDownAreaList()">
<el-option v-for="(item,index) in cityList" :label="item.cityname" :selected="item.id==userForm.cityId" :value="item.id" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="区">
<el-select v-model="userForm.areaId" placeholder="请选择">
<el-option v-for="(item,index) in areaList" :label="item.cityname" :selected="item.id==userForm.areaId" :value="item.id" :key="index"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
toRegister:function () {
this.dialogFormVisible= true;
var url = "/city/1";
this.$http.get(url).then((resp)=>{
if(resp.data.code == 20000){
console.log(resp.data.data);
this.provinceList = resp.data.data ;
}
})
},
//加载省下面的所有的市的数据
queryProvinceDownCityList:function(){
this.cityList = [];
this.areaList = [];
var url = "/city/"+this.userForm.provinceId;
this.$http.get(url).then((resp)=>{
if(resp.data.code == 20000){
this.cityList = resp.data.data ;
}
})
},
queryCityDownAreaList:function(){
this.areaList = [];
var url = "/city/"+this.userForm.cityId;
this.$http.get(url).then((resp)=>{
if(resp.data.code == 20000){
this.areaList = resp.data.data ;
}
})
},
方法二:安装插件
npm install element-china-area-data -S
代码实现
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { regionData,CodeToText } from 'element-china-area-data'
export default {
data () {
return {
options: regionData,
selectedOptions: []
}
},
methods: {
handleChange (value) {
let data =CodeToText[value[0]]+", "+CodeToText[value[1]]+", "+CodeToText[value[2]];
console.log(data)
}
}
}
</script>