一 自定义组件
1 位置
2 代码
<template>
<div class="areaSelect flex">
<!-- 省选择框 -->
<el -s elect
filterable
:disabled="disabled"
v-model=" PR ovince"
:size="size"
placeholder="省"
@change="changeCode($event,0)">
<el-option
v-for=" IT em in provinceList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 市选择框 -->
<el-select
filterable
:disabled="disabled"
class=" center _select"
v-model="city"
placeholder="市"
@change="changeCode($event,1)">
<el-option
v-for="item in cityList"
: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="item in areaList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
n am e: 'regionSelect',
props: {
Size: '',
disabled: {
size: String,
ty PE : 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.areaName && val.areaName ! == '') {
this.province = val.provinceCode
this.city = val.cityCode
this.area = val.areaCode
this.provinceCity(val.provinceCode)
this.cityArea(val.cityCode)
} else {
this.cityList = []
this.areaList = []
}
}
},
mount ed () {
if (this.code.areaName &am p; & this.code.areaName !== '') {
this.province = this.code.provinceCode
this.city = this.code.cityCode
this.area = this.code.areaCode
this.provinceCity(this.code.provinceCode)
this.cityArea(this.code.cityCode)
}
this.getProvince()
},
methods: {
resetArea () {
this.province = ''
this.city = ''
this.area = ''
},
// 当 type == 0 ，data 表示省编码
// 当 type == 1 ，data 表示市编码
changeCode (data, type) {
if (type === 0) {
this.city = ''
this.area = ''
this.provinceCity(data)
}
if (type === 1) {
this.area = ''
this.cityArea(data)
}
if (this.province !== '' && this.city !== '' && this.area !== '') {
this.$emit(
'code', [{
code: this.province,
name: this.provinceList.find(
(val) => val.value === this.province
).label
}, {
code: this.city,
name: this.cityList.find(
(val) => val.value === this.city
).label
}, {
code: this.area,
name: this.areaList.find(
(val) => val.value === this.area
).label
}]
)
}
},
// 从后台获得省数据列表
async getProvince () {
let result = []
let url = '/base/division/provinceList'
let data = aw ai t this.$http.get(url)
data.data.data.map((item) => {
result.push({
label: item.name,
value: item.code
})
})
this.provinceList = result
},
// 依据省编码获得市数据列表
async provinceCity (code) {
let result = []
let url = '/base/division/cityList'
let data = await this.$http({
url: url,
method: 'get',
params: {
provinceCode: code
}
})
data.data.data.map((item) => {
result.push({
label: item.name,
value: item.code
})
})
this.cityList = result
},
// 依据市编码获得区数据列表
async cityArea (code) {
let url = '/base/division/districtList'
let data = await this.$http({
url: url,
method: 'get',
params: {
cityCode: code
}
})
let result = []
data.data.data.map((item) => {
result.push({
label: item.name,
value: item.code
})
})
this.areaList = result
}
}
}
</script>
<style>
.center_select {
m arg in: 0 10px;
}
.global_form .areaSelect {
width: 70%;
}
.global_form .areaSelect .el-select {
width: 33.33%;
}
</style>
二 main.js 配置
// 行政区划三级选择
import RegionSelect From './ component s/regionSelect'
// 行政区划三级选择
@R_ 304 _768@(RegionSelect)
// 行政区划三级选择
Vue .COM ponent('regionSelect', RegionSelect)
三 使用方法
1 结构部分
<regionSelect :code="item.value" :disabled="item.disabled" :size="layout.size" @code="changeCode($event,item.prop)" v-if ="item.type==='region'" ref="selectArea" ></regionSelect>
2 代码部分
se Arch Form: {
province: '', // 省
city: '', // 市
district: '' // 区
},
item: { // 省市区 select 自定义组件传参部分
value: '',
type: 'region',
disabled: false
},
layout: { // 选择框样式，用于传参
size: ''
},
3 样式部分
// 省市区选择框 改变 时，传递出来已选择的值
changeCode (data, prop) {
this.searchForm.province = data[0].name
this.searchForm.city = data[1].name
this.searchForm.district = data[2].name
},
// 重置选择框
resetForm () {
this.$refs.selectArea[0].resetArea() // 清除省市区
}
四 测试
1 级联选择
2 观察数据
到此这篇关于Vue实现省市区三级联动el-select组件的示例代码的 文章 就介绍到这了,更多相关Vue省市区三级联动组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章: vue移动端城市三级联动组件使用详解 基于Vue2实现简易的省市区县三级联动组件效果 vue.js模仿京东省市区三级联动的选择组件实例代码 Vue自定义省市区三级联动 Vue实现省市区三级联动 vue + elementUI实现省市县三级联动的方法示例
总结
以上是 为你收集整理的 Vue实现省市区三级联动el-select组件的示例代码 全部内容，希望文章能够帮你解决 Vue实现省市区三级联动el-select组件的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Vue实现省市区三级联动el-select组件的示例代码的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did203989