element、antd 级联选择动态加载数据,点击两次出现子集children,不能触发视图更新、末级显示有小箭头问题

5 篇文章 0 订阅

动态加载类目:

// 动态加载类目
        loadData(item, bak) {
        // 第二个参数是一个函数,当你处理完数据之后执行这个函数就可以触发数据更新
            item.loading = true
            http.post(API_URL.getChildList(this.env), {
                parentId: item.categoryId,
            })
                .then(res => {
                    item.loading = false
                    if (item.loading === false) {
                        res.data.data.forEach(item => {
                            if (item.name) {
                                item.label = item.name
                                delete item.name
                            }
                            if (item.level === 3) {
                                delete item.loading
                            }
                        })
                        item.children = res.data.data
                        bak()
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },


小箭头问题:loading是组件自己给你加的,删了就没有小箭头了

antd(Ant Design)是一个企业级的UI设计语言和React组件库,它提供了一套完整的中后台产品解决方案,其中级联选择器(Cascader)是一个常用的组件,用于处理有层级关系的数据选择。在处理大量数据时,为了提高性能,antd提供了懒加载(Lazy Load)的功能,即按需加载数据,而不是一次性加载所有数据级联选择器的懒加载功能可以通过配置`loadData`属性来实现。`loadData`属性是一个函数,它会在需要加载下一级数据时被调用。这个函数接受当前节点(`Option`)作为参数,并返回一个Promise对象,该对象在解决后将包含该节点的下一级数据。 实现懒加载级联选择器时,你需要准备一个能表示层级关系的数据源,并且设计好如何按需获取下一级数据的逻辑。当用户展开某个节点时,组件会调用你提供的`loadData`函数来获取数据,并渲染下一级选项。 以下是实现懒加载级联选择器的基本步骤: 1. 准备数据源,并确保每个节点有表示层级关系的属性,如`value`、`label`、`children`等。 2. 使用`Cascader`组件,并为其设置`loadData`属性,该属性指向一个函数,该函数根据当前节点信息来异步获取下一级的数据。 3. 在`loadData`函数中,根据当前节点的信息(通常是其`value`),向服务器请求对应的数据,并返回一个Promise对象。 使用懒加载可以显著提高应用性能,尤其是在数据量大的场景下,因为它避免了一开始就加载所有数据,减少了内存的消耗和初始加载时间。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值