admin-sjzx/src/components/form/area/index.vue

<template>
    <el-cascader ref="cascader" v-bind="$attrs" :options="options" :props="cascaderProps" @change="change" />
</template>

<script lang="ts" setup>
import { defineComponent, ref, watch } from 'vue'

defineOptions({
    name: 'Area'
})
import { useDictData } from '@/stores/dictData'

const cascaderProps = {
    label: 'name',
    value: 'id',
    checkStrictly: true,
    emitPath: false
}
const cascader = ref()
const dictData = useDictData()
const options = dictData.state.area
const areaName = ref(dictData.state.area[0].name)
const change = (e: any) => {
    if (cascader.value.getCheckedNodes()[0]?.pathLabels.length == 1) {
        areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[0]
    } else if (cascader.value.getCheckedNodes()[0]?.pathLabels.length >= 2) {
        areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[1]
    }
}
// watch(
//     () => $attrs,
//     (newVal, oldVal) => {
//         console.log(123)

//         // GetEchar('中国')
//     }
// )

defineExpose({ areaName, change })
</script>

<style scoped></style>