小程序-树形结构

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

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>