Cascader 级联选择 动态加载数据
![在这里插入图片描述](https://img-blog.csdnimg.cn/8ec714c9f0d24faf8c229d1440c59450.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiJMTU1,size_20,color_FFFFFF,t_70,g_se,x_16)
<a-cascader
:load-data="loadCityData"
v-model:value="value"
:options="Provinces"
placeholder="Please select"
change-on-select
@change="changeProvinces"
/>
<script>
const Provinces = []
export default {
data() {
return {
value: [],
Provinces,
}
},
async created() {
await this.CityData()
},
methods: {
async CityData() {
const CityData = await this.ProvincesData(1)
CityData.map((item) => {
const { provinceName, regionalId } = item
this.Provinces.push({
value: regionalId,
label: provinceName,
isLeaf: false,
})
})
},
async ProvincesData(Id) {
let Dataresult
await this.$http({
url: this.$http.adornUrl('/task/getRegions'),
method: 'post',
params: this.$http.adornParams({
parentId: Id,
}),
}).then(({ data }) => {
console.log(data)
if (data) {
Dataresult = data.result
}
})
console.log(Dataresult)
return Dataresult
},
async loadCityData(selectedOptions) {
console.log(selectedOptions)
const targetOption = selectedOptions[selectedOptions.length - 1]
targetOption.loading = true
const CityData = []
const Provi = await this.ProvincesData(selectedOptions[selectedOptions.length - 1].value)
await Promise.all(
Provi.map(async (item) => {
CityData.push({
value: item.regionalId,
label: item.regionalName,
isLeaf: Object.keys(item.regionalId).length == 3 || Object.keys(item.regionalId).length == 5 ? false : true,
})
})
)
targetOption.children = CityData
console.log(targetOption.children)
this.Provinces = [...this.Provinces]
targetOption.loading = false
},
},
}
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/1158092172c54cc2a188012f139b7733.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiJMTU1,size_20,color_FFFFFF,t_70,g_se,x_16)
数据格式
![在这里插入图片描述](https://img-blog.csdnimg.cn/3355b50c4fd7449faa92c9108716758e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiJMTU1,size_20,color_FFFFFF,t_70,g_se,x_16)
多级选择 isLeaf:false 要显示必加 不显示为true