Vue-使用ElementUI级联选择器懒加载省市县数据

文章目录

问题描述解决方法

问题描述

官网的描述这里就不说了

在data里面定义一个props作为全局数据,请求异步方法,再通过resolve()去更新组件

但是我们在实际项目中,要请求后台的,调用的是我们在methods里面定义的方法

解决方法

methods中请求后台的方法

//请求省数据 async getProvince(callback) { let res = await this.$api.getProvince(); if (res.data.code == 200) { callback(res.data.provinces); } }, //请求市数据 async getCity(params) { let res = await this.$api.getCity(params); if (res.data.code == 200) { return res.data.cities; } }, //请求县数据 async getArea(params) { let res = await this.$api.getArea(params); if (res.data.code == 200) { return res.data.areas; } },

data数据

data() { let that = this; return { props: { //级联选择器懒加载 lazy: true, lazyLoad(node, resolve) { const { level } = node; console.log(level, node); if (level == 0) { that.getProvince((list1) => { let arr = list1.map((e) => ({ value: e.pid, label: e.pname })); resolve(arr); // 通过调用resolve将子节点数据返回，通知组件数据加载完成 }); } if (level == 1) { let { value } = node; that.getCity({ pId: value }).then(list2=>{ let arr = list2.map((e) => ({ value: e.cId, label: e.cName })); resolve(arr); }); } if (level == 2) { let { value } = node; that.getArea({ cId: value }).then(list3=>{ let arr = list3.map((e) => ({ value: e.aid, label: e.aname,leaf:true })); resolve(arr); }); } }, }, }; },

注意将let that = this;这行代码保存一下this指向,要不然访问不到方法 leaf:true代表是最后一级

页面代码

<el-cascader v-model="form.place" :props="props"></el-cascader>