处理树形结构

一、后端处理

1、编辑
后端处理树形结构比较消耗服务器。对编辑这样的操作
建议在保证原有业务逻辑的情况下直接将老的树删掉,重新添加个即可。

2、查询的时候
后端其实可以查询所有的值给到前端,前端可以根据parentId来递归生成一颗树就行了。

二、前端工具+组件处理

以AntDev为例子,当数组中含有Children的子数组时,就可以使用组件自动生成一棵树了。

前端工具如下

/**
     * 使用递归将数组转为树形结构
     * 父ID属性为parent
     */
    public static array2Tree(array: any, parentId: number) {
        if (Tool.isEmpty(array)) {
            return [];
        }

        const result = [];
        for (let i = 0; i < array.length; i++) {
            const c = array[i];
            console.log(Number(c.parentId), Number(parentId));
            if (Number(c.parentId) === Number(parentId)) {
                result.push(c);
                // 递归查看当前节点对应的子节点
                const children = Tool.array2Tree(array, c.id);
                if (Tool.isNotEmpty(children)) {
                    c.children = children;
                }
            }
        }
        return result;
    }

===================》甲乙Rocket ;2022.08.28; 22年8月第四周

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你需要处理树形结构的picker,可以使用`uniTreePicker`组件来实现。下面是一个示例代码: ```html <template> <view> <uniTreePicker v-model="selectedNode" :nodes="treeData" @confirm="onPickerConfirm"> <view class="picker-content">{{ selectedText }}</view> </uniTreePicker> </view> </template> <script> export default { data() { return { selectedNode: null, // 当前选择的节点 treeData: [ { text: '选项1', children: [ { text: '选项1-1' }, { text: '选项1-2' }, { text: '选项1-3', children: [ { text: '选项1-3-1' }, { text: '选项1-3-2' } ] } ] }, { text: '选项2', children: [ { text: '选项2-1' }, { text: '选项2-2' }, { text: '选项2-3' } ] }, { text: '选项3' } ] }; }, computed: { selectedText() { if (this.selectedNode) { return this.getSelectedNodeText(this.selectedNode); } return ''; } }, methods: { getSelectedNodeText(node) { if (node) { if (node.parent) { return `${this.getSelectedNodeText(node.parent)} - ${node.text}`; } else { return node.text; } } return ''; }, onPickerConfirm() { console.log('确认选择'); } } }; </script> <style scoped> .picker-content { height: 300rpx; line-height: 300rpx; text-align: center; } </style> ``` 在这个示例中,我们使用了`uniTreePicker`组件来实现树形结构的选择器。通过`treeData`数组,我们可以定义树的结构和节点的文本。选择器会根据树的结构展示节点,并通过`selectedNode`来保存当前选择的节点。通过计算属性`selectedText`,我们可以获取选择的文本,并在页面上显示出来。 当用户确认选择后,会触发`confirm`事件,你可以在`onPickerConfirm`方法中处理相应的逻辑。 希望这个示例对你有所帮助!如果有其他问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值