56 lines
1.9 KiB
Vue
56 lines
1.9 KiB
Vue
<template>
|
|
<div style="margin: 100px auto;width: 500px">
|
|
<a-cascader
|
|
style="width: 500px"
|
|
v-model:value="value"
|
|
:options="options"
|
|
:load-data="loadData"
|
|
placeholder="请选择行政区划"
|
|
change-on-select
|
|
/>
|
|
{{value}}
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import {onMounted, ref} from 'vue';
|
|
import type {CascaderProps} from 'ant-design-vue';
|
|
import api from "@/axios";
|
|
|
|
const options = ref<CascaderProps['options']>([]);
|
|
const DivisionTree = async ()=>{
|
|
const resp = await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionByParentCode',{parentCode:'0'})
|
|
options.value = resp.data as TreeNodeVo<string>[]
|
|
}
|
|
const loadData: CascaderProps['loadData'] = async selectedOptions => {
|
|
const targetOption = selectedOptions[selectedOptions.length - 1];
|
|
targetOption.loading = true;
|
|
const resp = await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionByParentCode',{parentCode:targetOption.value})
|
|
targetOption.loading = false;
|
|
targetOption.children = [options.value,...resp.data]
|
|
};
|
|
const transformData = (val:any,tree:any)=>{
|
|
for(let i = 0; i< val.length - 1;i++){
|
|
tree.forEach(async(item:any)=>{
|
|
if(item.value === val[i]){
|
|
item.children = []
|
|
let data = await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionByParentCode',{parentCode:val[i]})
|
|
item.children = data.data.map((items:any)=>{
|
|
return {
|
|
label:items.label,
|
|
value:items.value,
|
|
isLeaf:items.isLeaf
|
|
}
|
|
})
|
|
transformData(val,item.children)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
const value = ref<string[]>( [ "120000", "120100", "120115", "120115014" ]);
|
|
onMounted(async () => {
|
|
await DivisionTree()
|
|
await transformData(value.value,options.value)
|
|
});
|
|
</script>
|
|
|