Element Plus - Cascader 组件重置动态加载

张开发
2026/4/6 20:01:39 15 分钟阅读

分享文章

Element Plus - Cascader 组件重置动态加载
Cascader 组件重置动态加载1、动态加载template div el-cascader :propsprops / /div /template script langts export default { name: CascaderTest, }; /script script langts setup const props { lazy: true, lazyLoad(node, resolve) { const { level } node; // 第一层level 为 0 if (level 0) { console.log(动态加载第一层); resolve([ { value: staff, label: 人员信息, leaf: false, }, { value: task, label: 任务信息, leaf: false, }, ]); } else { console.log(动态加载第二层); setTimeout(() { if (node.value staff) { console.log(动态加载人员信息); resolve([ { value: staff1, label: 人员 1, leaf: true, }, { value: staff2, label: 人员 2, leaf: true, }, ]); } else if (node.value task) { console.log(动态加载任务信息); resolve([ { value: task1, label: 任务 1, leaf: true, }, { value: task2, label: 任务 2, leaf: true, }, ]); } }, 1000); } }, }; /script style scoped langsass/style2、重置动态加载template div el-cascader :propsprops / button clickreset重置/button /div /template script langts export default { name: CascaderTest, }; /script script langts setup const getProps () ({ lazy: true, lazyLoad(node, resolve) { const { level } node; // 第一层level 为 0 if (level 0) { console.log(动态加载第一层); resolve([ { value: staff, label: 人员信息, leaf: false, }, { value: task, label: 任务信息, leaf: false, }, ]); } else { console.log(动态加载第二层); setTimeout(() { if (node.value staff) { console.log(动态加载人员信息); resolve([ { value: staff1, label: 人员 1, leaf: true, }, { value: staff2, label: 人员 2, leaf: true, }, ]); } else if (node.value task) { console.log(动态加载任务信息); resolve([ { value: task1, label: 任务 1, leaf: true, }, { value: task2, label: 任务 2, leaf: true, }, ]); } }, 1000); } }, }); const props ref(getProps()); const reset () { props.value getProps(); }; /script style scoped langsass/style

更多文章