一个简单的基于vue手写的tree树

tree树子组件

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      <p>
        <span
          v-if="item.children && item.children.length > 0"
          :class="['icon-triangle', item.isOpen ? 'rotate' : 'rotateFalse']"
          @click.stop="openShow(item)"
        ></span>
        <span @click="treeItemClick(item)">{{ item.name }}</span>
      </p>
      <transition name="slide-fade">
        <!-- 递归组件循环引用，要有终止条件,再把子级传进去再次遍历-->
        <myTree
          v-show="item.isOpen && item.children && item.children.length > 0"
          :data="item.children"
          @myTreeClick="myTreeClick"
        ></myTree>
      </transition>
    </li>
  </ul>
</template>

<script>
import myTree from "@/components/myTree.vue";
export default {
  name: "myTree",
  comments: {
    myTree,
  },
  props: {
    // 树形数据
    data: {
      type: Array(),
      default: () => [],
    },
    // 是否手风琴
    isShouFengQin: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  created() {
  },
  methods: {
    openShow(item) {
      this.$nextTick(() => {
        if (this.isShouFengQin) {
          this.treeDataHandle(this.data);
        }
        item.isOpen = !item.isOpen; // 重新开启或者关闭
      });
    },
    // 遍历将tree树全部关闭状态
    treeDataHandle(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children && data[i].children.length > 0) {
          this.treeDataHandle(data[i].children);
        }
        data[i].isOpen = false;
      }
    },
    // 点击事件
    treeItemClick(data) {
      this.$emit("myTreeClick", data);
    },
    myTreeClick(data){
        this.$emit("myTreeClick", data);
    }
  },
};
</script>

<style lang="scss" scoped>
ul li {
  margin-left: -10px;
}
.icon-triangle {
  display: inline-block;
  border: 7px solid transparent;
  border-bottom-color: #ccc;
  transform: rotate(90deg);
  :hover {
    cursor: pointer;
  }
}
li {
  margin-left: 22px;
  margin-top: 13px;
  :hover {
    cursor: pointer;
  }
}
.rotate {
  transform: rotate(180deg);
  transition: all 1s;
  position: relative;
  top: 5px;
  right: 5px;
}
.rotateFalse {
  transform: rotate(90deg);
  transition: all 0.2s;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>

父组件调用

<template>
  <div id="app">
    <my-tree :data="treeData" @myTreeClick="myTreeClick"></my-tree>
  </div>
</template>

<script>
import MyTree from "./components/myTree.vue";
export default {
  name: "App",
  components: {
    MyTree,
  },
  data() {
    return {
      // n1:1
      treeData: [
        {
          id: 1,
          name: "一级数据",
          isOpen: false,
          isChecked: false,
          children: [
            {
              id: 10,
              name: "二级数据",
              isOpen: false,
              isChecked: false,
              children: [
                {
                  id: 100,
                  name: "三级数据",
                  isOpen: false,
                  isChecked: false,
                  children: [
                    {
                      id: 1000,
                      name: "四级数据",
                      isOpen: false,
                      isChecked: false,
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 2,
          name: "一级数据",
          isOpen: false,
          isChecked: false,
          children: [
            {
              id: 21,
              name: "二级数据",
              isOpen: false,
              isChecked: false,
            },
          ],
        },
      ],
    };
  },
  methods: {
    myTreeClick(data) {
      console.log(data);
    },
  },
};
</script>

<style>
ul,
li {
  list-style: none;
}
</style>