基于Vue+ElementUI的省市区选择公共组件

公共组件部分

此组件是配合后台用的，每选择一次，调去一次后台接口，获取相应地址的数据。

html部分：

[code]<template>
<el-form-item label="地址" :label-width="'100px'">
<el-select v-model="addList.province" placeholder="请选择省" class="address_select" @change="getcity(addList.province,true)" size="small">
<el-option v-for="item in sheng" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select v-model="addList.city" placeholder="请选择市" class="address_select" @change="getarea(addList.city,true)" size="small">
<el-option v-for="item in shi" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select v-model="addList.area" placeholder="请选择区" class="address_select" @change="postData()" size="small">
<el-option v-for="item in qu" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</template>

JS部分：

[code]<script>
export default {
name: "city",
data() {
return {
sheng: [],
shi: [],
qu: [],
};
},
props: ["addList"],//从父组件接受的数据
methods: {
// 获取省
getsheng() {
var _this = this;
_this
.$axios({
method: "post",
url: "*****"//获取省的接口
})
.then(function(res) {
if (res.data.flag == 0) {//请求成功
_this.sheng = res.data.data;//将获取的数据赋值
}
})
.catch(function(response) {
_this.$message.error(response.data.message);
});
},
// 点击地区获取市
getcity(id, is) {
if (is) {
//判断是否点击上一级
this.addList.area = "";
this.addList.city = "";
}
var _this = this;
var params = {
id: id //省的id，通过省获取此省下的市
};
params = this.$qs.stringify(params);
_this
.$axios({
method: "post",
url: "****",//获取市的接口
data: params
})
.then(function(res) {
console.log(res);
if (res.data.flag == 0) {
_this.shi = res.data.data;//赋值
} else {
}
})
.catch(function(response) {
_this.$message.error(response.data.message);
});
this.postData();
},
// 点击城市获取区
getarea(id, is) {
var _this = this;
if (is) {
//判断是否点击上一级
this.addList.area = "";
}
var params = {
id: id //市的id，通过市获取此市下的区
};
params = this.$qs.stringify(params);
_this
.$axios({
method: "post",
url: "*****",//获取区的接口
data: params
})
.then(function(res) {
if (res.data.flag == 0) {
_this.qu = res.data.data;
_this.postData();
}
})
.catch(function(response) {
_this.$message.error(response.data.message);
});

},
// 向父组件传值
postData() {
let _this = this;
let sheng = this.sheng;
let shi = this.shi;
let qu = this.qu;

setTimeout(function() {
_this.$emit("addlist", _this.addList);
}, 10);
}
},
mounted() {
this.getsheng();
},
watch: {
//监听父组件传值的变化
addList: {
handler: function(val, oldval) {
this.getcity(val.province, false);
this.getarea(val.city, false);
},
immediate: true, //关键
deep: true
}
}
};
</script>

父组件调用部分

我将公共组件命名为City

html部分：

[code]<City @addlist="getCity" :addList="addList"></City>

JS部分：

[code]<script>
// 引入省市区组件，公共组件所在的路径
import City from "../components/City";

export default {
components: { City },
data() {
return {
addList: {
province: "",
city: "",
area: ""
},
};
},
methods: {
//从子组件获取省市区
getCity(data) {
this.addList.province = data.province;
this.addList.city = data.city;
this.addList.area = data.area;
},
},
};
</script>