要做的功能 示意图是这样的，因为后端给的数据结构 不足以使用ant-design组件 的联动查询组件

所以只能自己分装 组件

当然 这个数据后端给的不一样的情况下 可能组件内对应的 逻辑方式就不一样

毕竟是 三个 数组 省份 城市 区域

我直接粘贴组件代码了

<template>
  <div class="cascader-compoents-container">
    <div class="city-select" @click.stop="toggleCascader">
      <a-input
        v-model:value="cascaderName"
        :style="{ width: width + 'px', 'text-align': 'left' }"
        placeholder="选择城市"
      />
      <DownOutlined
        style="
          font-size: 12px;
          color: rgba(0, 0, 0, 0.25);
          position: absolute;
          right: 11px;
          top: 10px;
        "
      />
    </div>
    <div class="city-select-content" v-if="cascaderShow" v-click-outside="handleClose">
      <div class="province" :style="{ width: width / 2 + 'px' }" v-if="province.length > 0">
        <div class="item" v-for="item in province" :key="item.value" @click="onSelected(item, 0)">
          <div>{{ item.label }}</div>
          <RightOutlined style="font-size: 12px; color: rgba(0, 0, 0, 0.25)" />
        </div>
      </div>
      <div class="city" :style="{ width: width / 2 + 'px' }" v-if="city.length > 0">
        <div class="item" v-for="item in city" :key="item.value" @click="onSelected(item, 1)">
          <div>{{ item.label }}</div>
          <RightOutlined style="font-size: 12px; color: rgba(0, 0, 0, 0.25)" />
        </div>
      </div>
      <div class="district" :style="{ width: width / 2 + 'px' }" v-if="district.length > 0">
        <div class="item" v-for="item in district" :key="item.value" @click="onSelected(item, 2)">
          <div>{{ item.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, toRefs, watch } from 'vue'
import * as addressApi from '@/api/address'

const props = defineProps({
  width: {
    type: [Number, String],
    default: 300,
  },
  placeholder: {
    type: String,
    default: '选择城市',
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
})
const { width, modelValue, placeholder } = toRefs(props)
const cascaderName = ref('')
const values = ref([])
const selectedId = ref([...modelValue.value])
const province = ref([])
const city = ref([])
const district = ref([])
const cascaderShow = ref(false)
const emits = defineEmits(['update:modelValue', 'onSelected'])
const updateCascaderName = () => {
  cascaderName.value = selectedId.value.map(item => item.label).join(' / ') || ''
}
// 监听 modelValue 变化以实现回显
watch(
  modelValue,
  async newVal => {
    selectedId.value = [...newVal]
    updateCascaderName()

  },
  { immediate: true },
)

const vClickOutside = {
  mounted(el: HTMLElement, binding: any) {
    el.clickOutsideEvent = (e: Event) => {
      if (!(el === e.target || el.contains(e.target as Node))) {
        binding.value(e)
      }
    }
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unmounted(el: HTMLElement) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  },
}

const toggleCascader = () => {
  cascaderShow.value = !cascaderShow.value
}

const handleClose = () => {
  cascaderShow.value = false
}
// 添加点击外部关闭逻辑
const handleClickOutside = (e: MouseEvent) => {
  //   const container = document.querySelector(`.cascader-compoents-container`)
  if (!e.currentTarget?.contains(e.target as Node)) {
    cascaderShow.value = false
  }
}
const getCityData = async (parentId: any, index: any) => {
  try {
    let { state, data, message: msg } = await addressApi.getChannelAreaList({ parentId })
    if (state === 200) {
      if (index == 0) {
        province.value = data.map((item: any) => {
          return {
            value: item.id,
            label: item.name,
            //   children: [],
          }
        })
        district.value = []
      } else if (index == 1) {
        city.value = data.map((item: any) => {
          return {
            value: item.id,
            label: item.name,
          }
        })
      } else if (index == 2) {
        district.value = data.map((item: any) => {
          return {
            value: item.id,
            label: item.name,
          }
        })
      }
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const onSelected = (item, index) => {
  console.log(item, index, 'item, index')
  if (index == 0) {
    city.value = []
    district.value = []
    selectedId.value[0] = item
  }
  if (index == 1) {
    selectedId.value[1] = item
  }
  if (index == 2) {
    selectedId.value[2] = item
    cascaderShow.value = false
  }

  cascaderName.value = selectedId.value.map(item => item.label).join(' / ')
  emits('onSelected', selectedId.value)
  emits('update:modelValue', [...selectedId.value])
  getCityData(item.value, index + 1)
}
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
  getCityData(0, 0)
})
onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>
<style lang="less" scoped>
.cascader-compoents-container {
  position: relative;
  .city-select {
    position: relative;
  }
  .city-select-content {
    position: absolute;
    display: flex;
    justify-content: space-around;
    left: 5px;
    top: 40px;
    z-index: 99;
    .province,
    .city,
    .district {
      background-color: #fff;
      height: 200px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      overflow-y: auto;
      border-radius: 5px;
      padding: 5px 0;
      transition: all, 0.3s;

      .item {
        display: flex;
        font-size: 13px;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        height: 35px;
        line-height: 30px;
        cursor: pointer;
        transition: all, 0.3s;

        &:hover {
          background-color: #f0f0f0;
        }
      }
    }
    .city,
    .district {
      margin-left: 10px;
    }
  }
}
</style>

父组件中使用

            <CascaderCom @onSelected="getPcd1" v-model="selectedPcd2"></CascaderCom>

@getPcd1 获取选择的省份城市 区域的 结果 自定义函数
 selectedPcd2  v-model 绑定的值 [] 有三个对象 分别对应 省 市 县  [{value:,label:},{value:,label:},{value:,label:}]

在vue中  v-model  本来就是 modelValue   的语法糖
这里组件内用到了 监听 modelValue 的 时间 修改 组件内的 选择的数组

这样能够解决 回显问题 因为 如果没有这个v-model 的 使用 父组件传递的回显数组 将不能够很快捷的在子组件中处理 

这是我对于 项目业务逻辑中的相关的使用来进行的封装组件 此项目多处使用了 类似样式  而且接口都一样 所以我把接口也放到了组件里 这样能够随机能用 当然 这个接口 原则上不太适合在组件中使用

所以我展现组件的目的

1.自己能够随时使用

2.其他技术人可以参考我的逻辑

3.可以给其他前端人 带来逻辑 学习

4.本人不才 望指教