html
<el-cascader
v-model="value"
:options="locationsData"
@change="handleChange"
:props="props"
placeholder="省/市/区"
clearable
></el-cascader>
locationsData: [], // 省市区
provinceArr: [], // 省
cityArr: [], // 市
districtArr: [], // 区
procidiArr: [],// 省市区级联选择id
props: {
lazy: true,
async lazyLoad(node, resolve) {
const { level } = node;
if (level == 0) {
let pro = {
areaType: 1,
};
await provinceAndCity(pro).then((res) => {
this.provinceArr = res.data;
});
var nodes = this.provinceArr.map((item) => {
return {
value: item.areaCode,
label: item.areaName,
leaf: false,
};
});
resolve(nodes);
} else if (level == 1) {
let pro = {
areaType: 2,
areaCode: node.data.value,
};
await provinceAndCity(pro).then((res) => {
this.cityArr = res.data;
});
// console.log(this.cityArr);
var nodes = this.cityArr.map((item) => {
return {
value: item.areaCode,
label: item.areaName,
leaf: false,
};
});
resolve(nodes);
} else if (level == 2) {
console.log(node);
let pro = {
areaType: 3,
areaCode: node.data.value,
};
await provinceAndCity(pro).then((res) => {
this.districtArr = res.data;
});
var nodes = this.districtArr.map((item) => {
return {
value: item.areaCode,
label: item.areaName,
leaf: true,
};
});
resolve(nodes);
}
},