需求：
1，先请求一个接口，获取级联选择器的第一层数据
2，根据点击的第一层数据中的某一条获取的id获取后台数据，渲染级联选择器的第二层数据
lazyLoad函数页面进来的时候会自动调用一次 拿到省的数据 level = 0
- 点击省份的时候 level = 1
- 点击市区的时候 level = 2
- 点击区县的时候 level 是没了 最后一层了
默认第一次进来node的数据打印：
第一层打印：
if (node.level == 0) {
var params = "";
} else {
var params = node.value;
}
if (node.level <= 3) {
//层级不能大于3
try {
const res = await getArea(params);
if (res.code === 200) {
const nodes = res.data.map(item => ({
// ...item,//?
label: item.name,
id: item.id,
value: item.areaCode,
leaf: level >= 2 //? 指定选项的叶子节点的标志位为选项对象的某个属性值 3 >= 2 => true
}));
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(nodes);
}
} catch (error) {
console.log(error);
}
多层判断改为json对象：
const requestData = {
0: "",
1: node.value,
2: node.value
};
try {
const res = await getArea(requestData[level]);
if (res.code === 200) {
const nodes = res.data.map(item => ({
label: item.name,
id: item.id,
value: item.areaCode,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(nodes);
}
} catch (error) {
console.log(error);
}
或者是： switch 语句
const areaProps = {
lazy: true,
async lazyLoad(node: any, resolve: any) {
const { level, data } = node;
let nodes;
switch (level) {
case 0:
nodes = await useProvince();
break;
case 1:
nodes = await useCity(data.value.key);
break;
case 2:
nodes = await useRegion(data.value.key);
break;
}
resolve(nodes);
},
};
也可以用 ‘-’分隔
<el-cascader
v-model="updateForm.category"
separator="-"
:props="cascaderProps"
></el-cascader>
需要注意的是，leaf是一个booler值，为true时不显示子节点，反之显示。其他参数直接赋值即可。
leaf 为true 通俗一点解释就是 有下级
leaf: level >= 3 试了一下 最后一级是没有level的
解决方法：
方法一：动态开关lazy属性和数据初始化的时候动态初始化options解决这个问题。(亲测有效！！！)
created() {
this.props = {
lazy: true,
lazyLoad: async (node, resolve) => {
const { level } = node;
// 请求参数
const requestData = {
0: "",
1: node.value,
2: node.value
};
try {
const res = await getArea(requestData[level]);
if (res.code === 200) {
const nodes = res.data.map(item => ({
label: item.name,
id: item.id,
value: item.areaCode,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(nodes);
}
} catch (error) {
console.log(error);
}
}
};
this.position = ['110000', '110100', '110105'];
},
方法二：，省市区拆分成三个下拉框了，
这样处理起来方便很多，不过这样也就没有所谓的cascader了
