引入下载
npm install area-data --save
页面引入
import { pcaa } from 'area-data'
页面使用
<el-form-item label="省" prop="province">
<el-select v-model="form.province" placeholder="请选择省" style="width: 190px"
@change="seletekey($event, 'province')">
<el-option
v-for="(val, key) in proviceList"
:key="val"
:label="val"
:value="val"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="市" prop="city">
<el-select v-model="form.city" placeholder="请选择市" style="width: 190px"
@change="seletekey($event, 'city')">
<el-option
v-for="(val, key) in cityList"
:key="val"
:label="val"
:value="val"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="县" prop="county">
<el-select v-model="form.county" placeholder="请选择县" style="width: 190px"
@change="seletekey($event, 'area')">
<el-option
v-for="(val, key) in countyList"
:key="val"
:label="val"
:value="val"
></el-option>
</el-select>
</el-form-item>
data定义
proviceList: pcaa['86'], // 获取所有的省
pcaaData: pcaa,
cityList: [],
countyList: [],
方法
seletekey(e, type) {
if (e) {
switch (type) {
case 'province':
Object.keys(this.proviceList).filter(item => {
if (this.proviceList[item] === e) {
this.cityList = this.pcaaData[item]
}
})
break
case 'city':
Object.keys(this.cityList).filter(item => {
if (this.cityList[item] === e) {
this.countyList = this.pcaaData[item]
}
})
break
case 'area':
break
}
}
},