树形数据转换---利用递归将后端返回的树形结构数据变为uni-data-picker组件需要的数据,涉及字段和数据处理

1.后端返回的数据

 "data": [
        {
            "id": 1,
            "pid": 0,
            "title": "家具",
            "children": [
                {
                    "id": 6,
                    "pid": 1,
                    "title": "实木床"
                },
                {
                    "id": 7,
                    "pid": 1,
                    "title": "气垫床"
                }
            ]
        },
        {
            "id": 2,
            "pid": 0,
            "title": "家电",
            "children": [
                {
                    "id": 3,
                    "pid": 2,
                    "title": "电视机"
                },
                {
                    "id": 4,
                    "pid": 2,
                    "title": "洗衣机"
                },
                {
                    "id": 5,
                    "pid": 2,
                    "title": "冰箱"
                }
            ]
        }
    ]

2.uni-data-picker需要的数据结构

items: [{
          text: "家具",
          value: "1,0",
          children: [
            {
              text: "实木床",
              value: "1,1"
            },
            {
              text: "气垫床",
              value: "1,2"
            }
          ]
        }]

3.需要转换的数据:title变为text,id,pid键值拼接,并且键名改为value,例如value:'1,1'

// 将后端返回的树形结构数据修改为uni-ui组件库中uni-data-picker组件需要的树形结构数据,将title字段转换为text字段,将id,pid字段值拼接,键名改为value
			transformData(data) {
				return data.map(item => {
					const {
						id,
						pid,
						title,
						children
					} = item;
					const value = `${pid},${id}`;
					const text = title;
					const transformedItem = {
						text,
						value
					};
					if (children && children.length > 0) {
						transformedItem.children = this.transformData(children);
					}
					return transformedItem;
				});
			},

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值