Vue3 ElementPlus el-cascader级联选择器动态加载数据

参考了这位的大佬的写法

element el-cascader动态加载数据 （多级联动，落地实现）_el-cascader 动态加载_林邵晨的博客-CSDN博客

<el-cascader style="width: 300px" :props="address" v-model="addressValue" clearable />

import { ref } from 'vue';
// 省市区接口 改成自己定义的api方法名
import { commonAdministrative } from '@/api/modules/common';// 默认值 回显数据格式 ['区级code1', '区级code2', '区级code3']
let addressValue = ref(['000001', '000002', '000003'])// 省市区
let address = {lazy: true, // 开启懒加载// checkStrictly: true, //可选择任意节点async lazyLoad(node, resolve) {// node为当前点击的节点，resolve为数据加载完成的回调(必须调用)const nodes = [];// 构造查询条件 => 接口入参let params = {parentAreaCode: node.value, // 入参名按照自己的接口来改};// 请求接口let { data } = await commonAdministrative(params)if (data) {data.map((item) => {let obj = {value: item.areaCode,label: item.areaDesc,leaf: node.level >= 2, // 当 node.level 层级达到2级时, 就不再请求接口// 具体要多少级才不请求接口, 根据层级修改};nodes.push(obj);});}//重新加载节点resolve(nodes);},
};