实现动态加载省市区的功能,由于数据量有点多,所以第一次查询出来所有的省,点击省的时候调用接口查询下面的市,点击市的时候在调用接口显示下面的区。官网写的很不详细,泛泛而谈,以下提供完整代码。下面是前端页面效果图:
<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.levelconst parentId = node.valuelet 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>