<el-cascader :props="props"></el-cascader>
<script>
let id = 0;
export default {
data() {
return {
props: {
lazy: true,
lazyLoad (node, resolve) {
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: level + 1 })
.map(item => ({
value: ++id,
label: `选项${id}`,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}, 1000);
}
}
};
}
};
</script>
element官网示例代码。
在lazyLoad可以加上后端的异步请求。
一般会出现以下问题,请求出现两次的问题,数据出现重复。这种问题一般是的node 下的children 属性不为空自己又添加一遍造成的。自己仔细断点调试可以解决的。
还有就是数据回显的问题。
<el-cascader
v-if="showCascader"
v-model="form.redHot"
style="width: 100%"
:props="props"
>
</el-cascader>
data() {
return {
showCascader: false,
};
},
初始化的时候的隐藏级联选择器。一旦v-model 的值赋值完成之后的再将showCascader改成true。这就可以完成回显。
目前好像针对两级级联可以实现,多级级联存在问题。