vue编写嵌套树状结构导航组件

这里我就直接贴代码了，里面有一点点备注，哈哈哈

<template>
  <div>
    <div v-for="item in dataList">
      <div
        class="tree-row"
        :class="selectTreeItem==item.id?'active-row':''"
        @click="clickItem(item.id,item.queryData)"
      >
       <!-- 这里的item.isChecked可以自己递归在dataList写入true/false  -->
        <span
          class="icon"
          v-show="item.childrenList!=undefined&&(item.childrenList.length!=0)"
          :class="item.isChecked?'expand-icon':'collapse-icon'"
          @click="item.isChecked=!item.isChecked"
        >
          <!-- svg-icon 是另外一个组件，这里可以自己写icom  -->
          <svg-icon icon-class="trangle" class-name="triangle-icon"></svg-icon>
        </span>
        <span
          v-show="item.childrenList!=undefined&&(item.childrenList.length!=0)"
          class="folder-icon"
        >
          <svg-icon icon-class="folder" class-name="delete-circle-icon"></svg-icon>
        </span>
        <span
          class="unit-icon-item"
          v-show="item.childrenList==undefined||(item.childrenList.length==0)"
        >
          <svg-icon icon-class="unit" class-name="delete-circle-icon unit-icon"></svg-icon>
        </span>
        <span>{{item.itemName}}<i v-show="item.dataNum">{{' ('+item.dataNum+') '}}</i></span>
      </div>
       <!-- 自己嵌套自己  -->
      <position-tree
        class="child-level"
        :selectTreeItem="selectTreeItem"
        @clickItem="clickItem"
        v-show="item.isChecked"
        :dataList="item.childrenList"
      ></position-tree>
    </div>
  </div>
</template>

<script>
import positionTree from "@C/common/tree";
export default {
  props: {
    dataList: {
      type: [Object, Array],
      default: () => {}
    },
    selectTreeItem: {
      type: Number,
      default: 0
    }
  },
  name: "positionTree",
  data() {
    return {};
  },
  components: {
    positionTree
  },
  methods: {
  	// 这里设置的点击事件， this.$emit传递给父组件
    clickItem(id,queryData) {
      // console.log("click", id);
      this.$emit("clickItem", id,queryData);
    }
  }
};
</script>

<style scoped>
</style>