vue3+ts element 行政区划组件开发

<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" />
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw, onMounted } 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,
    },
    // 指定某省，传入该自治区的areacode
    designation: {
        type: String,
        default: '',
    },
    // 仅显示最后一级
    showAllLevels: {
        type: Boolean,
        default: true,
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false,
    },
    // 输入框占位文本
    placeholder: {
        type: String,
        default: '',
    },
    // 是否选择任意一级选项，还是最后叶子结点
    checkStrictly:{
        type: Boolean,
        default: true,
    },
    // 次级菜单的展开方式,click和hover
    expandTrigger:{
        type: String,
        default: 'click',
    },
})

const value = ref([])   //
let options: any = ref([])  //树

onMounted(() => {
    // 获取全量数据
    getAllData()
})

const emit = defineEmits(['update:modelValue', 'change'])

let selectarr = []
const handleChange = (e: any, e2: any) => {
    emit('update:modelValue', e)
    emit('change', e)
}

let firstLevel = []

async function getAllData() {
    let res = await api.SearchAdministrativeDivisions({
        queryArea: props.designation
    })
    options.value = res.data
    console.log(options.value, '---options.value');

}

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 innerProps: CascaderProps = {
    checkStrictly: props.checkStrictly,
    // lazy: true,
    value: 'areaCode',
    label: 'name',
    multiple: props.multiple,
    expandTrigger:props.expandTrigger
}

</script>
  
<style></style>