gis-one-map-web/src/components/cus/CusTreeItem.vue

<template>
  <div class="cus-tree-item">
    <template v-for="item in data">
      <template v-if="item._count > 0">
        <div
            class="cus-tree-item-slot"
            :style="`padding-left: ${options.left * level}px;`"
        >
          <div class="expend-img" @click="item._expend = !item._expend, $forceUpdate()">
            <template v-if="item?.[options.children]?.length > 0">
              <img v-if="item._expend" :src="options.expendTrueImg"/>
              <img v-else :src="options.expendFalseImg"/>
            </template>
          </div>
          <slot :data="item">
            <div
                class="cus-tree-item-label"
            >
              {{item[options.label]}}
            </div>
          </slot>
        </div>
        <CusTreeItem
            v-if="item?.[options.children]?.length > 0"
            v-show="item._expend"
            :data="item[options.children]"
            :options="options"
            :level="level + 1"
        >
          <template #default="{data}">
            <slot :data="data"/>
          </template>
        </CusTreeItem>
      </template>
    </template>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref,
    toRefs,
    reactive,
    watch,
    getCurrentInstance,
    ComponentInternalInstance,
    computed, nextTick,
  } from "vue";
  import { useStore } from "vuex";
  import { useRouter } from "vue-router";
  import { ElMessage, ElMessageBox } from "element-plus";
  export default defineComponent({
    name: "CusTreeItem",
    components: {
    },
    props: {
      data: {
        required: true
      },
      options: {
        required: true
      },
      level: {
        default: 0
      }
    },
    setup(props) {
      const store = useStore();
      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
      const state = reactive({
      });
      onMounted(() => {
      })
      return {
        ...toRefs(state),
      }
    },
  });
</script>
<style scoped lang="scss">
.cus-tree {
  width: 100%;
  height: calc(100vh);
  .cus-tree-item-slot {
    display: flex;
    align-items: center;
    .cus-tree-item-label {
      width: 100%;
      cursor: pointer;
      &:hover {
        background-color: #F5F7FA;
      }
    }
    .expend-img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
      >img {
        cursor: pointer;
        width: 100%;
        height: 100%;
      }
    }
  }

}
</style>