zhgdyunapp/components/tree-node/areaIndex.vue

 <template>
  <view class="tree-content-compontent">
    <view
      class="content-box"
      :class="{ 'content-box_project': item.projectSn }"
      :style="`padding-left: ${treeIndex * 30}rpx;`"
      @click="toggleNodes(item)"
    >
      <text class="box-text">
        <image
          v-if="item.projectSn"
          class="img"
          src="/static/file-icon.png"
          mode=""
        ></image>
        {{ item.name }}
      </text>
      <view @click.stop="expandFn">
        <template v-if="pageType == 'video'">
          <text
            v-if="item.projectNum || item.projectNum == 0"
            class="box-text1"
            >{{ item.projectNum || "" }}</text
          >
          <text v-else class="box-text1"
            >({{ item.onlineVideoNum || 0 }}/{{ item.videoNum || 0 }})</text
          >
        </template>
        <text v-else class="box-text1">{{ item.projectNum || "" }}</text>

        <!-- <u-icon name="arrow-right" color="#B3B3B3" size="40"
					v-if="!expanded && item.list && item.list.length" style="margin-right: 10rpx;"></u-icon>
				<u-icon name="arrow-down" color="#B3B3B3" size="40"
					v-if="expanded && item.list && item.list.length" style="margin-right: 10rpx;"></u-icon> -->
        <u-icon
          v-if="!expanded && item.list && item.list.length"
          name="arrow-right"
          color="#B3B3B3"
          size="40"
        ></u-icon>
        <u-icon
          v-if="expanded && item.list && item.list.length"
          name="arrow-down"
          color="#B3B3B3"
          size="40"
        ></u-icon>
      </view>
      <image
        v-if="(!item.list || !item.list.length) && !iconShow"
        style="width: 55rpx; height: 40rpx"
        src="../../static/videoControlIcon/videoIcon1.png"
        mode=""
      >
      </image>
      <!-- <image style="width:80rpx;height:80rpx;float:left" src="../../static/icon-down-black.png" mode="">
			</image> -->
    </view>
    <view class="sub-component">
      <view
        :class="{ expandedStyle: expanded == true }"
        v-if="item.list && item.list.length && expanded"
      >
        <TreeMenu
          :pageType="pageType"
          :iconShow="iconShow"
          v-for="(child, index) in item.list"
          :key="child.companyId || child.projectId"
          :item="child"
          :treeIndex="treeIndex + 1"
          :expandedIndex="index"
          @clickItem="clickTreeItem"
        ></TreeMenu>
      </view>
    </view>
  </view>
</template>

 <script>
import TreeMenu from "./areaIndex.vue";
export default {
  name: "TreeMenu",
  components: {
    TreeMenu,
  },
  props: ["item", "pageType", "treeIndex", "iconShow", "expandedIndex"],
  data() {
    return {
      expanded: false,
    };
  },
  mounted() {
    if (this.expandedIndex == 0) {
      this.expanded = true;
    }
  },
  methods: {
    clickTreeItem(item) {
      console.log(item, 777888);
      if (!item.projectSn) return;
      this.$emit("clickItem", item);
      // uni.navigateTo({
      // 	url: `/pages/videoManage/videoGroup?&sn=${item.projectSn}`
      // })
    },
    expandFn(e) {
      console.log(e, 666);
      this.expanded = !this.expanded;
    },
    toggleNodes(item) {
      this.$emit("clickItem", item);
    },
  },
};
</script>

 <style lang="scss" scoped>
.tree-content-compontent {
  background: white;
  border-bottom: 2rpx solid #f7f7f7;

  .content-box {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 16rpx 26rpx;
    position: relative;

    // border-bottom: 2px solid #D6D6D6;
    > .box-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #1a1a1a;
      margin-right: auto;
      display: inline-block;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .img {
        width: 28rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }
    }

    .box-text1 {
      font-weight: 500;
      font-size: 28rpx;
      color: #b3b3b3;
      padding: 0 28rpx;
    }
  }

  .content-box_project {
    background-color: #f2f3f7;
    border-bottom: 1px solid #fff;
  }
  .sub-component {
    background: #ffffff;

    .tree-content-compontent {
      background: #ffffff;
      border: none;
    }
  }

  .expandedStyle {
    // padding-left: 60rpx;
  }
}
</style>