惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

F
Fortinet All Blogs
Attack and Defense Labs
Attack and Defense Labs
V2EX - 技术
V2EX - 技术
O
OpenAI News
S
Secure Thoughts
H
Heimdal Security Blog
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Schneier on Security
Schneier on Security
H
Hacker News: Front Page
S
Security Affairs
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Vercel News
Vercel News
Microsoft Security Blog
Microsoft Security Blog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
P
Proofpoint News Feed
The Register - Security
The Register - Security
GbyAI
GbyAI
Cloudbric
Cloudbric
MongoDB | Blog
MongoDB | Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
K
Kaspersky official blog
Forbes - Security
Forbes - Security
Y
Y Combinator Blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
Scott Helme
Scott Helme
Hacker News - Newest:
Hacker News - Newest: "LLM"
The Cloudflare Blog
Recorded Future
Recorded Future
人人都是产品经理
人人都是产品经理
Cyberwarzone
Cyberwarzone
C
CERT Recently Published Vulnerability Notes
Webroot Blog
Webroot Blog
C
Cyber Attacks, Cyber Crime and Cyber Security
L
LangChain Blog
T
Tor Project blog
Microsoft Azure Blog
Microsoft Azure Blog
博客园_首页
Hacker News: Ask HN
Hacker News: Ask HN
Blog — PlanetScale
Blog — PlanetScale
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
B
Blog RSS Feed
N
News and Events Feed by Topic
阮一峰的网络日志
阮一峰的网络日志
I
Intezer
V
V2EX
T
Tailwind CSS Blog
SecWiki News
SecWiki News
NISL@THU
NISL@THU
C
Check Point Blog

博客园 - 微宇宙

js-金额相加 小程序- 字符数据换行 antd-输入框去掉光晕 大屏缩放布局 大屏显示 echarts - 原型的方向盘动画 小程序- 自定义导航栏组件封装 小程序-echart动画git仓库 小程序- 隐私协议完善 小程序- 日期picker样式问题 echart - 折线图显示设置 echart - 移动端提示内容无阴影 echart 柱状图 - 零界点 正负方向展示 小程序 - 导航栏 图标设置 小程序 - 错误问题记录 react项目全屏功能 react-大屏显示antd浮窗 React andt库设置主题色彩 React闭包陷阱 git 操作 小程序 - 订阅消息通知 小程序-分包 mysql安装使用 redis安装使用 echart 格式化水平坐标 tooltip数据 小程序-模板用法 小程序-登录验证码的加载方式 工作代码规范 小程序-锚链接 小程序-菜单tabbar设置 小程序-分享功能 array数组 js 小程序-标题自定义设置 小程序-图表 小程序-拨打电话
小程序-树形结构
微宇宙 · 2025-12-16 · via 博客园 - 微宇宙

递归多级的树形结构,用二位数组展示和收缩的

planList2: [
      {
        name: '第一个',
        value: '1',
        pid: 0, // 父级 = 关联上一个级别
        current: 123456, // 当前 = 唯一值
        leftIndex: 0, // 缩进位移
        primary: 1 // 主键 = 区分多个层级的 展示-收缩3个级别
      },
          {
            name: '第一个- 第1个',
            value: 2,
            pid: 123456,
            current: 555123,
            leftIndex: 1, // 缩进位移
          },
          {
            name: '第一个- 第2个', 
            value: 3,
            pid: 123456,
            current: 555234, // 父级 - 子
            leftIndex: 1, // 缩进位移
            primary: 2 // 主键 如果有children 子级,就把 index 加到 primary 上面。
          },
              {
                name: '第2级- 第1个 第1个',
                value: 4,
                pid: 555234,
                leftIndex: 2, // 缩进位移
                current: 666123,  // 父级 - 子
              },
              {
                name: '第2级- 第2个 第2个',
                value: 5,
                pid: 555234,
                leftIndex: 2, // 缩进位移
                current: 666234,
              },

          // 第二个
          {
            name: '第一个- 第3个',
            value: 6,
            pid: 123456,
            current: 555456, // 父级 - 子
            leftIndex: 1, // 缩进位移
            primary: 2 // 主键
          },
              {
                name: '第3级- 第1个 第1个',
                value: 7,
                pid: 555456,
                leftIndex: 2, // 缩进位移
                current: 666789,  // 父级 - 子
              },
              {
                name: '第3级- 第2个 第2个',
                value: 9,
                pid: 555456,
                leftIndex: 2, // 缩进位移
                current: 666456,
              },

      {
        name: '第一个',
        value: 11,
        pid: 0, // 父级
        current: 654321, // 当前
        primary: 1 // 主键
      },

    ],
  handleOpen(e) {
    const pid =  e.currentTarget.dataset.pid;
    const primary =  e.currentTarget.dataset.primary;
    const current =  e.currentTarget.dataset.current;

    console.log(pid,primary,current)

    /**
     * primary 存在主键 就是父级
     * handleOpen() 
     *    selection_id == pid 如果是等价关系 操作显示和隐藏 
     */
    if(primary) {
      const selection_id = current;

      const planList2 = this.data.planList2;
      planList2.forEach(item => {
        if(item.pid == selection_id) {
          item.show = !item.show
        }
      })
      this.setData({
        selection_id,
        planList2
      });


    }

  },
<block wx:for="{{planList2}}" wx:key="title">
                <view wx:if="{{!item.show}}" bind:tap="handleOpen" data-pid="{{item.pid}}" data-primary="{{item.primary}}" data-current="{{item.current}}" style="padding-left: {{item.leftIndex * 15}}px;" class="table-item fs14" >
                  <block wx:if="{{item.primary}}">
                    <mp-icon  class="flex column txt-title" icon="arrow" type="outline" size="{{10}}"></mp-icon>
                  </block>
                  <text class="flex column txt-title txt color-deep-blue">{{item.name||'--'}}</text>
                </view>
              </block>

 树形后端如果是一个三维的树形结构,可以先把树形转化为二维的结构。初始化只需要四个参数 (data, [], 0, 0)

递归方法传参如下:

原始数据和有子数组 children;

递归存储数组list;

当前索引主键和缩进 tiny;

当前id;

所有父级id设置pidlist;

在开发的过程中,父节点要点击收缩子节点,在子节点上绑定一个父节点 ,现在统一定义父子节点别名,子节点定义为 cid,父级节点定义为 pid,如果父节点点击收缩的,可以把子节点合并起来。

这时候,父节点 要跨级 收缩子节点,只需要把父节点在没一个子节点上绑定加上即可,有一种简单的方式,就是在每一个子节点上加一个 Array 数组字段,然后把逐级往下传递,这样最后深的子节点就包含了父上的索引节点.

item.pid_list = [...parent_muti_id, myid];

如何区分是父节点,可以设置要给 primary 主键为遍历的索引值,只需要在有子级 children .length 长度时,设置一次主键即可。

如果要定义每一层子级不断缩进展示,需要给没个字迹设置一个 初始值 leftIndex 为 0,然后每次递归循环 leftIndex +1.