56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<template>
|
|
<div class="area-select">
|
|
<el-cascader :style="{ width }" v-model="areaValue" :options="options" :props="props2" clearable></el-cascader>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import area from '@/utils/area'
|
|
import { ref, computed } from 'vue'
|
|
|
|
/** Emit Start **/
|
|
const emit = defineEmits(['update:province', 'update:city', 'update:district'])
|
|
/** Emit End **/
|
|
|
|
/** Props Start **/
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
province?: any
|
|
city: any
|
|
district: any
|
|
width?: string
|
|
checkStrictly?: boolean
|
|
}>(),
|
|
{
|
|
province: null,
|
|
city: null,
|
|
district: null,
|
|
width: '340px',
|
|
checkStrictly: true
|
|
}
|
|
)
|
|
|
|
const props2 = {
|
|
checkStrictly: true
|
|
}
|
|
/** Props End **/
|
|
|
|
/** Data End **/
|
|
const options = ref<any>(area) // 地区列表
|
|
/** Data Start **/
|
|
|
|
/** Computed Start **/
|
|
// 更新绑定数据
|
|
const areaValue = computed({
|
|
get: () => {
|
|
return [props.province, props.city, props.district]
|
|
},
|
|
set: (value: any) => {
|
|
emit('update:province', value ? value[0] : '')
|
|
emit('update:city', value ? value[1] : '')
|
|
emit('update:district', value ? value[2] : '')
|
|
}
|
|
})
|
|
/** Computed Start **/
|
|
</script>
|