element + vue3，级联选择器实现省市区

 由于es6支持哈希，所以数据量只要不太大，就不需要对el-cascader进行点击后在调接口出现下一级，很简单的就是直接获取所有数据。

<template><div><el-cascader :modelValue="modelValue" :props="innerProps" :options="options" @change="handleChange" filterable:show-all-levels="showAllLevels" :disabled="disabled" :placeholder="placeholder" :clearable="clearable"style="width:100%" @blur="onBlur" @focus="onFocus" @close="handleClose" @visible-change="onVisibleChange" /><!-- --- {{ modelValue }} --></div>
</template><script lang="ts" setup>
import { ref, reactive, toRaw, onMounted, watch, onBeforeUnmount } from 'vue'
import type { CascaderProps } from 'element-plus'
import * as api from "./api.js";const props = defineProps({modelValue: {type: Array,default: []},// 是否支持清空选项clearable: {type: Boolean,default: true,},// 是否多选// multiple: {//     type: Boolean,//     default: false,// },// 指定某省，传入该自治区的areacodedesignation: {type: String,default: '',},// 仅显示最后一级showAllLevels: {type: Boolean,default: true,},// 是否禁用disabled: {type: Boolean,default: false,},// 输入框占位文本placeholder: {type: String,default: '',},// 是否选择任意一级选项，还是最后叶子结点checkStrictly: {type: Boolean,default: true,},// 次级菜单的展开方式,click和hoverexpandTrigger: {type: String,default: 'click',},// 多选个数限制selectNummultipleSelectNum: {type: Number,default: 1,},// 省市县乡镇，显示层级，默认为2，到区县。0为省，1为市，2为区县，3为乡镇level: {type: Number,default: 2,},
})let options: any = ref([])  //树
const watchArr = ref([])onMounted(() => {// 获取全量数据getAllData()
})//重新定义一个值来接受prop
const isMultiple = ref(false)//因为prop中的值非动态响应，所以需要通过watch监听，immediate 初始化时接收父组件中的传值
watch(() => props.multipleSelectNum, () => {// isMultiple.value = props.multipleSelectNum;if(props.multipleSelectNum > 1) {isMultiple.value = true}console.log(isMultiple.value,props.multipleSelectNum,'---props.multipleSelectNum;');}, {immediate: true
})onBeforeUnmount(() => {})const emit = defineEmits(['update:modelValue', 'change'])
const handleChange = (e: any, e2: any) => {watchArr.value = eemit('change', e)emit('update:modelValue', e)
}async function getAllData() {let res = await api.SearchAdministrativeDivisions({queryArea: props.designation,level: props.level})options.value = res.data
}function onFocus(e: any) { }
async function onBeforeFilter(e: any) {let res = await api.SearchAdministrativeDivisions({queryArea: e})const fn = (arr: any[]) => {arr.forEach((item, index) => {if (item.children && item.children.length) {item.children = fn(item.children)} else {if (item.children) delete item.children}})return arr}// console.log(options, '---options');options.value = fn(res.data)
}
// const isMultiple = ref(false)
const innerProps: CascaderProps = {checkStrictly: props.checkStrictly,// lazy: true,value: 'areaCode',label: 'name',multiple: isMultiple.value, //modifyexpandTrigger: props.expandTrigger,
}
const handleClose = () => { }
const onBlur = () => {// console.log('---onBlur');
}
const onVisibleChange = (e: any) => {// if (props.modelValue.length < props.multipleSelectNum && props.multiple == true) {if (props.modelValue.length < props.multipleSelectNum && isMultiple.value == true) { //modifyfunction onRabbit(list: any) {list.forEach((el: any) => {if (el.children && el.children.length > 0) {el.children = onRabbit(el.children);}el.disabled = false;el.isFlag = false});return list;}const newList = onRabbit(options.value);options.value = newList;}
}
// 监听
watch(() => watchArr.value,(newVal, oldVal) => {// if (props.multiple == true) {if (isMultiple.value == true) {   //modify// console.log(oldVal,`watch监听变化前的数`)// console.log(newVal, `watch监听变化后的数据`)if (newVal.length >= props.multipleSelectNum) {function onRabbit(list: any) {list.forEach((el: any) => {if (el.children && el.children.length > 0) {el.children = onRabbit(el.children);}newVal.forEach((v: any) => {if (v[v.length - 1] != el.areaCode) {if (el.isFlag) {} else {el.disabled = trueel.isFlag = true}} else {el.disabled = falseel.isFlag = true}})});return list;}const newList = onRabbit(options.value);options.value = newList;} else {function onRabbit(list: any) {list.forEach((el: any) => {if (el.children && el.children.length > 0) {el.children = onRabbit(el.children);}el.disabled = false;el.isFlag = false});return list;}const newList = onRabbit(options.value);options.value = newList;}}},{immediate: true, // 立即执行deep: true // 深度监听}
)
</script><style></style>