React接口数据多级级联

最新推荐文章于 2024-09-03 08:33:35 发布

程琬清君

最新推荐文章于 2024-09-03 08:33:35 发布

阅读量804

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_51780751/article/details/123900249

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在此之前我看了下面这个链接的大佬写的代码，然后自己琢磨出了对应的属性应该是哪几个。

ElementUi中级联选择器(根据后台返回来数据处理显示在级联选择器中),处理最后一级为空白情况_沐浴前端的博客-CSDN博客

// 处理成级联数据格式
    function handleDetailData(detailData: any, newDetailData: any) {
        const len = detailData.length;
        for (let i = 0; i < len; i++) {
            // 如果子级存在，并且有数据。 sub是子级
            if (detailData[i].sub && detailData[i].sub.length > 0) {
                newDetailData.push({
                    code: detailData[i].id,// 这三个属性都是组件库级联组件所需要的属性
                    name: detailData[i].name,
                    items: []
                });
                handleDetailData(detailData[i].sub, newDetailData[i].items);
            } else {
                // 子级不存在时，不用push items:[],否则级联选择器最后一页会出现空白
                newDetailData.push({ code: detailData[i].id, name: detailData[i].name });
            }
        }
        return newDetailData;
    }

useEffect(() => {
        getCategoryDetail({})
            .then(res => {
                console.log(res);
                console.log(handleDetailData(res, []));
            })
            .catch(err => {
                message.error(err.errorMsg);
            });
    }, [data]);