改封装组件依赖element-china-area-data插件，引入组件可参照：https://www.npmjs.com/package/element-china-area-data
<!--
* component:省市县下拉选联动
* time:2023/7/19
* author:zx
* 使用方式:
* import DialogAddress from "@/components/Dialog/dialogAddress.vue"; // 引入
* components: { DialogAddress }; // 注册
* this.$refs.refAddress.open = true; // 打开弹框调用的方法
* <dialog-address ref="refAddress"/>
title：弹框显示标题, pageId:页面id，根据id查询历史操作记录
-->
<template>
<div>
<!-- 地址联系人 地址录入 -->
<el-dialog title="选择地址" :visible.sync="open" width="30%" append-to-body>
<el-form id="form" :model="addressParams" class="search-table" ref="queryForm" label-width="70px">
<el-form-item label="省" prop="province">
<el-select v-model="addressParams[conditionSet.province]" placeholder="请选择" @change="provinceChange"
style="width:100%">
<el-option v-for="item in provinceList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="市" prop="city">
<el-select v-model="addressParams[conditionSet.city]" placeholder="请选择" @change="cityChange" style="width:100%">
<el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="区" prop="area">
<el-select v-model="addressParams[conditionSet.area]" placeholder="请选择" style="width:100%">
<el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="addressParams[conditionSet.address]"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="newAddress">生成新地址</el-button>
<el-button @click="closeAddressDialog">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { regionData, CodeToText } from 'element-china-area-data'
export default {
data() {
return {
// 地址录入弹窗
open: false,
addressParams: {
province: '',
city: '',
area: '',
address: '',
},
provinceList: regionData,
cityList: [],
areaList: []
}
},
created() {
},
props: {
// 查询条件字段设置
conditionSet: {
type: Object,
default: () => {
return {
province: 'province',
city: 'city',
area: 'area',
address: 'address',
}
}
},
},
computed: {
},
methods: {
// 地址录入
addressEntry() {
this.open = true
},
// 生成市级列表
provinceChange(value) {
this.cityList = []
this.areaList = []
this.addressParams.city = ''
this.addressParams.area = ''
console.log(this.provinceList)
const province = CodeToText[value]
if (province === '北京市' || province === '天津市' || province === '上海市' || province === '重庆市' ||
province === '香港特别行政区' || province === '澳门特别行政区') {
const city = { value: value, label: province }
this.cityList.push(city)
} else {
const childList = this.provinceList.find(i => i.value === value).children
this.cityList.push(...childList)
}
},
// 生成区列表
cityChange(value) {
this.areaList = []
this.addressParams.area = ''
const city = CodeToText[value]
if (city === '北京市' || city === '天津市' || city === '上海市' || city === '重庆市' ||
city === '香港特别行政区' || city === '澳门特别行政区') {
const childList = this.provinceList.find(i => i.value === value).children[0].children
this.areaList.push(...childList)
} else {
const childList = this.cityList.find(i => i.value === value).children
this.areaList.push(...childList)
}
},
// 生成新地址
newAddress() {
if (this.addressParams.province === '北京市' || this.addressParams.province === '天津市' || this.addressParams.province === '上海市' || this.addressParams.province === '重庆市' ||
this.addressParams.province === '香港特别行政区' || this.addressParams.province === '澳门特别行政区') {
let addressText = this.addressParams.province + this.addressParams.area + this.addressParams.address
this.$emit("newAddress", this.addressParams, addressText)
} else {
let addressText = this.addressParams.province + this.addressParams.city + this.addressParams.area + this.addressParams.address
this.$emit("newAddress", this.addressParams, addressText)
}
this.closeAddressDialog()
},
// 关闭选择地址弹窗
closeAddressDialog() {
this.open = false
},
},
}
</script>
<style lang="less" scoped>
</style>