uniapp 折叠面板嵌套

先上代码 然后再上效果图 钉钉小程序是可以使用的 箭头暂时没有加上 需要就加一个就可以了

<template>
  <view class="position-group">
    <!-- 一级循环 -->
    <view
      class="pronames_one"
      v-for="(item, index) in positionlist"
      :key="index"
      :class="item.oneliststare ? 'oneshow' : 'onehide'"
    >
      <view class="pronames-one-label" @click="onelist(index)">
        <text>{{ item.onename }}</text>
        <label
          :class="item.oneliststare ? 'cuIcon-fold' : 'cuIcon-unfold'"
        ></label>
      </view>
      <!-- 二级循环 -->
      <view
        class="pronames_two"
        v-for="(item2, index2) in item.positiontwo"
        :key="index2"
        :class="item2.twoliststare ? 'twoshow' : 'twohide'"
      >
        <view class="pronames-two-label" @click="twolist(index, index2)">
          <text>{{ item2.twoname }}</text>
          <label
            :class="item2.twoliststare ? 'cuIcon-fold' : 'cuIcon-unfold'"
          ></label>
        </view>
        <view class="pronames_three">
          <!-- 三级循环 -->
          <view
            class="pronames_three-label"
            v-for="(item3, index3) in item2.positionthree"
            :key="index3"
          >
            <label
              :class="positionSele ? 'cuIcon-round' : 'cuIcon-roundcheckfill'"
            ></label>
            <text>{{ item3.trheename }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      positionSele: true,
      positionlist: [
        {
          id: 0,
          onename: "选择作业班组",
          oneliststare: false,
          positiontwo: [
            {
              twoid: 0,
              twoname: "卸货一班",
              twoliststare: false,
              positionthree: [
                {
                  trheeid: 0,
                  trheename: "卸货甲",
                  twoselestare: false,
                },
                {
                  trheeid: 0,
                  trheename: "卸货乙",
                  twoselestare: false,
                },
                {
                  trheeid: 0,
                  trheename: "卸货丙",
                  twoselestare: false,
                },
              ],
            },
            {
              twoid: 1,
              twoname: "卸货三班",
              twoliststare: false,
              positionthree: [
                {
                  trheeid: 0,
                  trheename: "卸货三丙",
                  twoselestare: false,
                },
                {
                  trheeid: 0,
                  trheename: "卸货丁",
                  twoselestare: false,
                },
                {
                  trheeid: 0,
                  trheename: "卸货三甲",
                  twoselestare: false,
                },
              ],
            },
            {
              twoid: 2,
              twoname: "机动一班",
              twoliststare: false,
              positionthree: [
                {
                  trheeid: 0,
                  trheename: "机动一甲",
                  twoselestare: false,
                },
                {
                  trheeid: 1,
                  trheename: "机动一乙",
                  twoselestare: false,
                },
                {
                  trheeid: 2,
                  trheename: "机动一丁",
                  twoselestare: false,
                },
              ],
            },
            {
              twoid: 3,
              twoname: "机动二班",
              twoliststare: false,
              positionthree: [
                {
                  trheeid: 0,
                  trheename: "机动二甲",
                  twoselestare: false,
                },
                {
                  trheeid: 1,
                  trheename: "机动二乙",
                  twoselestare: false,
                },
                {
                  trheeid: 2,
                  trheename: "机动二丙",
                  twoselestare: false,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    onelist(index) {
      let positionlist = this.positionlist;
      // 展开收起一级列表 start
      if (positionlist[index]["oneliststare"] == false) {
        positionlist[index]["oneliststare"] = true;
      } else {
        positionlist[index]["oneliststare"] = false;
      }
      // 展开收起一级列表 end
    },

    twolist(index, index2) {
      let positionlist = this.positionlist;
      let positiontwo =
        this.positionlist[index].positiontwo[index2]["twoliststare"];

      console.log(positiontwo);

      // 展开收起二级列表 start

      if (positiontwo == false) {
        this.positionlist[index].positiontwo[index2]["twoliststare"] = true;
      } else {
        this.positionlist[index].positiontwo[index2]["twoliststare"] = false;
      }
      // 展开收起二级列表 end
    },
  },
};
</script>

<style>
page {
  background: #fff;
}

.position-group {
  width: 100%;
  height: auto;
}

/* 一级 */
.pronames_one {
  width: 100%;
  height: auto;
}

.pronames-one-label {
  width: 100%;
  height: 110rpx;
  line-height: 110rpx;
  background: #fff;
  box-sizing: border-box;
  padding: 0px 3%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #eaeaea solid;
}

.pronames-one-label text {
  font-size: 15px;
  color: #2ebbfe;
}

.pronames-one-label label {
  color: #aaa;
  font-size: 20px;
  transition: all 0.5s;
}

/* 二级 */
.pronames_two {
  width: 100%;
  height: auto;
  transition: all 0.5s;
}

.pronames-two-label {
  width: 100%;
  height: 110rpx;
  line-height: 110rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 3%;
  border-bottom: 1px #eee solid;
}

.pronames-two-label text {
  font-size: 15px;
  color: #333;
}

.pronames-two-label label {
  color: #aaa;
  font-size: 20px;
  transition: all 0.5s;
}

/* 三级 */
.pronames_three {
  width: 100%;
  height: auto;
}

.pronames_three-label {
  width: 97%;
  margin-left: 3%;
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  flex-direction: row;
  border-bottom: 1px #f1f1f1 solid;
  align-items: center;
}

.pronames_three-label label {
  width: 10%;
  height: 90rpx;
  line-height: 90rpx;
  display: block;
  color: #d5d5d5;
  font-size: 20px;
}

.pronames_three-label text {
  width: 90%;
  font-size: 15px;
  color: #868686;
}

/* 展开收起效果 start */

.oneshow {
}

.oneshow .pronames_two {
  display: block;
}

.onehide {
}

.onehide .pronames_two {
  display: none;
}

/* 展开收起效果 end */

.twoshow {
}

.twoshow .pronames_three {
  display: block;
  display: flex;
}

.twohide {
}

.twohide .pronames_three {
  display: none;
}
</style>

有其他需要的 可以看看这个 uniapp 三级折叠列表(展开/收起)_颜浩.的博客-CSDN博客_uniapp 多级折叠列表