【uniapp】自定义多级折叠面板 ，搜索用JS递归遍历树结构

 页面展示

组件代码

components/collapse/sidebar-item.vue

<template>
  <view class="Sidebar">
    <scroll-view style="white-space: nowrap;width: 100%;height: 100%;" scroll-y="true">
      <view v-for="(item,index) in arr" :key='index'>
        <view class="allbox" @click="lock(item,index)">
          <view class="title_box">
            <slot name="title">
<!--              <image v-if="thumb" :src="thumb" class="img"></image>-->
<!--              <image v-else :src="item.img" class="img"></image>-->
              <view>
                <view :class="{'box':true,'title':item.show && active === item.deptId}">
                  {
  {item.deptName?item.deptName:'标题'}}
                </view>
                <view class="Subtitle" v-if="Subtitle">
                  {
  {item.Subtitle?item.Subtitle:'副标题'}}
                </view>
              </view>
            </slot>
          </view>
          <view v-if="item.child && item.child.length > 0" class="right">
            <u-icon v-if