43 lines
1.3 KiB
Vue
43 lines
1.3 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 emit = defineEmits(["changeValue"])
|
|
const cascaderProps = {
|
|
label: 'name',
|
|
value: 'id',
|
|
checkStrictly: true,
|
|
emitPath: false
|
|
}
|
|
const cascader = ref()
|
|
const dictData = useDictData()
|
|
const options:any = dictData.state.area
|
|
const areaName = ref(dictData.state.area[0].name)
|
|
const jbName = ref(dictData.state.area[0].name)
|
|
const change = (e: any) => {
|
|
console.log("🚀 ~ change ~ cascader.value.getCheckedNodes()[0]?.pathLabels.length:", cascader.value.getCheckedNodes()[0]?.pathLabels.length)
|
|
|
|
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]
|
|
}
|
|
|
|
emit('changeValue', cascader.value.getCheckedNodes()[0])
|
|
}
|
|
const changeName = () => {
|
|
return jbName.value
|
|
}
|
|
|
|
defineExpose({ areaName, change })
|
|
</script>
|
|
|
|
<style scoped></style>
|