data() {
return {
value: [], // 多级联动的值 => 会是一个数组
props: {
lazy: true,
lazyLoad: (node, resolve) => {
// node 节点数据 node.value => 当前节点的值
// level: 层级 => 1,2,3,4
const { level } = node;
// 动态节点
const nodes = [];
// 为1代表第一次请求
let type = level == 0 ? “1” : node.value;
this.provinceFn(type)
.then((res) => {
if (res.code == -1) {
this.msgFn(“error”, res.message);
return;
}
// 节点数组
res.data.map((item) => {
// obj里的键值是官方要求的
let obj = {
value: item.city_id,
label: item.city_name,
leaf: node.level >= 3,
};
nodes.push(obj);
});
// resolve 节点返回
resolve(nodes);
})
.catch((error) => {
console.log(error);
});
},
},
};
}
FAQ
注释其实已经非常详细了,整体思路是这样的:
-
根据官方文档,首先得知道 lazyLoad方法中的参数node, resolve分别是什么
-
配置自己的接口请求,我的是地区数据(省市区四级联动)
-
需要注意的是 props需要在data()里赋值,所以数据请求也要放进去
-
获取到数据后,需要按照它的规范赋值 => value:值,label:文字,leaf:层级
-
如果是三级,那么leaf值是=> 0, 1, 2,以此类推。我的是四级,所以是 => node.level >= 3
-
尽量不要用hover(效果会一闪一闪的,用户体验不好,click最佳)
已封装成组件,附上全部代码,供君使用:
<el-cascader
size=“mini”
:props=“props”
@change=“handleChange”
v-model=“value”
style=“width: 300px”