实现动态加载省市区的功能,由于数据量有点多,所以第一次查询出来所有的省,点击省的时候调用接口查询下面的市,点击市的时候在调用接口显示下面的区。官网写的很不详细,泛泛而谈,以下提供完整代码。下面是前端页面效果图:
<template>
<el-cascader :props="props" />
</template>
<script lang="ts" setup>
import type { CascaderProps } from 'element-plus'
const props: CascaderProps = {
lazy: true,
async lazyLoad(node, resolve) {
//查询省市区调用的接口看后端如何设计,我这里是所有的接口调用同一个,每次调用传父节点的id,代码为//了好理解,省市区调用的接口我写了三个
const level = node.level
const parentId = node.value
let options;
if(level==0){
let data = await getProvince()
options = data.map(item => ({
value: item.name,
label: item.value,
leaf: level >= 2,
}))
}else if(level==1){
let data = await getCity({
provinceId:parentId
})
options = data.map(item => ({
value: item.name,
label: item.value,
leaf: level >= 2,
}))
}else if(level == 2){
let data = await getDistrict({
cityId:parentId
})
options = data.map(item => ({
value: item.name,
label: item.value,
leaf: level >= 2,
}))
}
resolve(options)
}
}
</script>