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);
},
};
更多推荐
已为社区贡献2条内容
所有评论(0)