钉钉小程序tree 递归

最新推荐文章于 2023-09-07 14:58:45 发布

渣女园

最新推荐文章于 2023-09-07 14:58:45 发布

阅读量545

点赞数 1

分类专栏：钉钉文章标签： js html

本文链接：https://blog.csdn.net/qq_41642795/article/details/119564380

版权

钉钉专栏收录该内容

2 篇文章 0 订阅

订阅专栏

有个问题不懂,钉钉小程序创建后,为什么在pages里创建的组件不能使用,反而得创建到node_modules里才能使用,是漏了哪一步?mytree就是加的组件,为什么呢?
在这里插入图片描述

言归正传

这是效果图
在这里插入图片描述

当然,第一步是创建自定义组件,钉钉里讲的就很详细https://developers.dingtalk.com/document/app/development-process

实现如下
html

<view class="a-collapse">
  <view class="a-collapse-title" onTap="selectType" data-itemid='{{ model.id }}' data-itemname='{{ model.name }}'>
    <view class="{{open ? 'a-collapse-title-arrow a-collapse-title-arrow-up' : 'a-collapse-title-arrow'}}" catchTap='toggle'/>
   {{model.name}}
  </view>
  <view style='padding-left: 50rpx;' hidden='{{ !open }}'>
    <mytree a:for='{{ model.children }}' a:key='id' model='{{ item }}'></mytree></view></view>

js重点是 props 接收组件传递来的值，要与传递的key一致，其他方法根据自己需求

data: {
    open: false,     //是否展开
    isBranch: true, //是否有子级
  },
  props: { model: '', }, //接收model
  toggle: function (e) {
      if (this.data.isBranch) {
        this.setData({
          open: !this.data.open,
        })
      }
    },

css是用的支付宝组件Collapse 折叠面板的样式地址:https://opendocs.alipay.com/mini/component-ext/collapse

那么如何调用tree组件
html

<view>
  <block a:for="{{typelistArr}}">
    <mytree model='{{ item }}'></mytree>  //传递model
  </block>
</view>

其实这些都不重要，重要的是如何利用递归生成我们所需要的数据结构，这才是最难的地方，这个就因接口而异了

参考:

recursionPushChildren(root, data)
  recursionPushChildren(tree, data) {
    for (let i = 0; i < tree.length; i++) {
      let pNode = tree[i];
      let children = this.getChildren(pNode.id, data);
      if (children && children.length > 0) {
        this.recursionPushChildren(children, data);
      }
      pNode.children = children;
    }
  }
getChildren(pId, treeArray) {
    let arr = [];
    if (treeArray) {
      return treeArray.filter((element) => {
        return element.pId == pId;
      })
    }
    return arr;
  },