el-cascader 懒加载请求错误时可重新点击节点

项目场景:

使用el-cascader,并开始懒加载,当请求接口报错时,希望可以再次点击节点从新发送请求


问题描述

el-cascader,开始懒加载,当请求接口报错时,节点无法再次点击发送请求


解决方案:

lazyLoad(node, resolve) {
    queryOgfBlock().then(res => {
          // 成功处理节点
    }).catch(() => {
        // 失败时处理数据,只需要将node的loading设置为false即可再次点击发送请求
       node.loading = false;
    });
}

### el-cascader 懒加载与快捷搜索实现 为了使 `el-cascader` 支持懒加载和快捷搜索功能,可以采用以下方式: #### 1. 配置懒加载属性 通过配置 `props` 属性来启用懒加载特性。这允许组件仅在需要才加载子节点的数据。 ```javascript data() { return { cascaderData: [], props: { lazy: true, lazyLoad (node, resolve) { const { level } = node; setTimeout(() => { let children = []; if (level === 0) { // 加载根节点数据 children = [ { value: 'beijing', label: '北京' }, { value: 'shanghai', label: '上海' } ]; } else if (level > 0 && level < 3) { // 动态加载下一层级数据 children = Array.from({ length: 2 }).map((_, idx) => ({ value: `${node.value}-${idx}`, label: `${node.label}-${idx}` }) ); } // 解析异步请求的结果 resolve(children); }, 1000); // 模拟网络延迟 } } }; } ``` 此代码片段展示了如何定义懒加载逻辑[^2]。 #### 2. 添加快捷搜索能力 为了让用户能够快速定位到特定选项,在输入框内键入关键词即可过滤显示的内容。为此需引入额外插件或自定义处理函数。 一种简单的方法是在原有基础上增加一个全局筛选器,监听用户的键盘事件,并据此调整可见项列表。 另一种更优雅的方式是利用第三方库如 Fuse.js 来增强模糊匹配效果,提高用户体验。 然而对于 Element UI 的 `el-cascader` 而言,官方并未直接提供内置的快捷搜索功能。因此推荐使用社区贡献的扩展版本——`el-cascader-plus`[^3],该版本不仅解决了懒加载下的多项缺陷,还增强了性能表现。 安装命令如下所示: ```bash npm i el-cascader-plus --save ``` 之后按照文档说明替换原有的 `el-cascader` 标签为 `<el-cascader-plus>` 即可获得更好的交互体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值