第一步: 安装插件
npm i element- china- area- data@5.0 .2 - S
第二步: 省市区三级分类组件代码:
< template>
< div class = " city-container" >
< span class = " title" > 省市区:</ span>
< el-select class = " pro-city-arear" v-model = " province" placeholder = " 请选择" @change = " mainSelectChange(province)" clearable >
< el-option
v-for = " item in arearOptions"
:key = " item.label"
:label = " item.label"
:value = " item.value"
>
</ el-option>
</ el-select>
< span class = " line" > -</ span>
< el-select class = " pro-city-arear" v-model = " city" placeholder = " 请选择" @change = " subSelectChange(city)" :disabled = " isSubDisabled" clearable >
< el-option
v-for = " subItem in subArearOptions"
:key = " subItem.id"
:label = " subItem.label"
:value = " subItem.value"
> </ el-option>
</ el-select>
< span class = " line" > -</ span>
< el-select class = " pro-city-arear" v-model = " area" placeholder = " 请选择" @change = " subSonSelectChange(area)" :disabled = " isSubSonDisabled" clearable >
< el-option
v-for = " subSonItem in subSonArearOptions"
:key = " subSonItem.value"
:label = " subSonItem.label"
:value = " subSonItem.value"
> </ el-option>
</ el-select>
</ div>
</ template>
< script>
import { regionDataPlus } from 'element-china-area-data'
export default {
name: 'City' ,
components: {
} ,
props: {
} ,
data ( ) {
return {
arearOptions: regionDataPlus,
subArearOptions: [ ] ,
subSonArearOptions: [ ] ,
province: '全部' ,
city: '全部' ,
area: '全部' ,
index: 0 ,
subIndex: 0 ,
subSonIndex: 0 ,
isSubDisabled: false ,
isSubSonDisabled: false ,
}
} ,
computed: {
} ,
watch: {
province ( newProvince, oldProvince ) {
if ( newProvince !== oldProvince) {
this . city = '全部'
this . area = '全部'
this . subArearOptions = this . arearOptions[ this . index] . children
this . $emit ( 'changeProvince' , newProvince)
this . $emit ( 'changeCity' , '全部' )
this . $emit ( 'changeArea' , '全部' )
}
} ,
city ( newCity, oldCity ) {
if ( newCity !== oldCity) {
this . area = '全部'
this . $emit ( 'changeCity' , newCity)
this . $emit ( 'changeArea' , '全部' )
}
} ,
area ( newArea, oldArea ) {
if ( newArea !== oldArea) {
this . $emit ( 'changeArea' , newArea)
}
}
} ,
methods: {
mainSelectChange ( value ) {
try {
if ( value === '' ) {
this . province = '全部'
this . city = '全部'
this . isSubDisabled = true
this . area = '全部'
this . isSubSonDisabled = true
} else {
this . isSubDisabled = false
this . isSubSonDisabled = false
this . arearOptions. forEach ( ( item, index ) => {
if ( item. value === value) {
this . index = index
this . province = item. label
return
}
} )
this . subArearOptions = this . arearOptions[ this . index] . children
this . subSonArearOptions = [ ]
}
} catch ( error) {
console. log ( error, '省市区一级分类发生错误' )
}
} ,
subSelectChange ( value ) {
try {
if ( value === '' ) {
this . city = '全部'
this . area = '全部'
this . isSubSonDisabled = true
} else {
this . isSubSonDisabled = false
this . subArearOptions. forEach ( ( item, subIndex ) => {
if ( item. value === value) {
this . subIndex = subIndex
this . city = item. label
return
}
} )
this . subSonArearOptions = this . subArearOptions[ this . subIndex] . children
}
} catch ( error) {
console. log ( error, '省市区二级分类发生错误' )
}
} ,
subSonSelectChange ( value ) {
try {
if ( value === '' ) {
this . area = '全部'
} else {
this . subSonArearOptions. forEach ( ( item, subSonIndex ) => {
if ( item. value === value) {
this . subSonIndex = subSonIndex
this . area = item. label
}
} )
}
} catch ( error) {
console. log ( error, '省市区三级分类发生错误' )
}
} ,
}
}
< / script>
< style scoped lang = " less" >
// css
.city-container {
display : inline-block;
.title {
margin-right : 10px;
font-size : 16px;
}
.pro-city-arear {
width : 180px;
height : 40px;
}
.line {
margin : 0 10px;
}
}
</ style>
第三步: 在父组件中的代码:
` ` `html
< template>
< div class = "orderdetails-container" >
< ! -- 省市区三级分类组件 -- >
< city
@changeProvince= "( value ) => {
this . province = value
} "
@changeCity= "( value ) => {
this . city = value
} "
@changeArea= "( value ) => {
this . area = value
} ">
< / city>
< / div>
< / template>
< script>
import City from '../City.vue'
export default {
components: {
City,
} ,
data ( ) {
return {
province: '' ,
city: '' ,
area: '' ,
}
}
}
< / script>