话不多说先上图
HTML部分
<b-col md="6">
<el-select v-model="provinceValue" clearable @clear="shengdel" placeholder="请选择省" @change="chooseProvince" @visible-change="chusheng" style="width:150px;">
<el-option
v-for="item in provinceData"
:key="item.code"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</b-col>
<b-col md="6">
<el-select v-model="cityValue" clearable @clear="shidel" placeholder="请选择市" @change="chooseCity" @visible-change="chushi" style="width:150px;">
<el-option
v-for="item in cityData"
:key="item.code"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</b-col>
<b-col md="6">
<el-select v-model="areaValue" clearable @clear="qudel" @change="chooseArea" placeholder="请选择区、县" @visible-change="chuxian" style="width:150px;">
<el-option
v-for="item in areaData"
:key="item.code"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</b-col>
data部分
//hb是对于本地的写法javaSc.json是下载的城市数据
//如果是需要本地的城市数据https://static.panpay.com/static/nuxt/json/ChinaCity.json可以下载
hb:'./js/javaSc.json',
provinceValue:'',
cityValue:'',
areaValue:'',
provinceData:[],
cityData:[],
areaData:[],
shengID: '',
shiID: '',
quID:'',
methods部分
//这里是删除的时候清空所选中的Id
shengdel() {
console.log('删除省')
this.shengID = '';
this.shiID = '';
this.quID = '';
},
shidel() {
console.log('删除市')
this.shiID = '';
this.quID = '';
},
qudel() {
this.quID = '';
console.log('删除区')
},
//下拉区请求区的数据
chuxian() {
var that = this;
axios.get('renzheng.ashx', {
params: {
action: 'GetAreaListBy',
type: 3,
pid:that.shiID,
}
})
.then(function (res) {
console.log(res)
that.areaData = res.data.data;
})
.catch(function (err) {
console.log(err)
});
},
//下拉区请求区的数据下拉市请求市的数据
chushi() {
var that = this;
axios.get('renzheng.ashx', {
params: {
action: 'GetAreaListBy',
type: 2,
pid:that.shengID,
}
})
.then(function (res) {
console.log(res)
that.cityData = res.data.data;
})
.catch(function (err) {
console.log(err)
});
},
//点击选择省下拉时调取的接口
//具体情况根据自己公司后台提供的需求,我这里是分三次请求,下拉省请求省的数据,下拉市请求市的数据
//下拉区请求区的数据
chusheng() {
var that = this;
axios.get('renzheng.ashx', {
params: {
action: 'GetAreaListBy',
type: 1,
}
})
.then(function (res) {
console.log(res)
that.provinceData = res.data.data
})
.catch(function (err) {
console.log(err)
});
},
chooseProvince(value) {
var that = this;
that.cityValue = '';
that.areaValue = '';
that.cityData = [];
that.areaData = [];
that.provinceData.map(e=>{//遍历数据
if( value == e.name){
that.cityData = e.cityList;
//可输出e看看自己的数据字段名字是多少
console.log(e)
that.shengID = e.id;
return;
}
})
console.log(this.provinceValue)
},
chooseCity(value) {
var that = this;
that.areaValue = '';
that.cityData.map(e=>{//遍历数据
if( value == e.name){
that.areaData = e.areaList;
console.log(e)
that.shiID = e.id;
return;
}
})
console.log(that.cityValue)
},
chooseArea(value) {
var that = this;
that.areaData.map(e=>{//遍历数据
if (value == e.name) {
that.quID = e.id;
console.log(e)
}
})
},
第二种写法
就是刚进入页面就把全部城市的数据请求过来
也可以把数据下载到本地 然后请求本地的
created(){
axios.get('http://47.99.104.19:8001/ChinaCity.json').then(res=>{
this.provinceData = res.data;
}).catch(e => {
this.$message.error("网络连接超时");
})
},