原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
Vue实现省市区三级联动el
目录一自定义组件1位置2代码二main.js配置三使用方法1结构部分2代码部分3样式部分四测试1级联选择2观察数据
一自定义组件
1位置
2代码
template
div
!--省选择框--
el-select
filterable
:disabled=disabled
v-model=province
:size=size
placeholder=省
@change=changeCode($event,0)
el-option
v-for=iteminprovinceList
:key=item.value
:label=item.label
:value=item.value
/el-option
/el-select
!--市选择框--
el-select
filterable
:disabled=disabled
v-model=city
placeholder=市
@change=changeCode($event,1)
el-option
v-for=itemincityList
:key=item.value
:label=item.label
:value=item.value
/el-option
/el-select
!--区选择框--
el-select
filterable
:disabled=disabled
v-model=area
placeholder=区
@change=changeCode($event,2)
el-option
v-for=iteminareaList
:key=item.value
:label=item.label
:value=item.value
/el-option
/el-select
/div
/template
script
exportdefault{
name:regionSelect,
props:{
size:,
disabled:{
size:String,
type:Boolean,
default:false
code:{
type:Object,
default:()={
return{
areaCode:,
areaName:,
cityCode:,
cityName:,
provinceCode:,
provinceName:
data(){
return{
province:,
city:,
area:,
provinceList:[],
cityList:[],
areaList:[]
watch:{
code(val){
if(val.areaNameval.areaName!==){
vince=vinceCode
this.city=val.cityCode
this.area=val.areaCode
vinceCity(vinceCode)
this.cityArea(val.cityCode)
}else{
this.cityList=[]
this.areaList=[]
mounted(){
if(this.code.areaNamethis.code.areaName!==){
vince=vinceCode
this.city=this.code.cityCode
this.area=this.code.areaCode
vinceCity(vinceCode)
this.cityArea(this.code.cityCode)
this.getProvince()
methods:{
resetArea(){
vince=
this.city=
this.area=
//当type==0，data表示省编码
//
文档评论（0）