43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
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>
|