vue组件封装 - 省市县下拉选联动

改封装组件依赖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>