封装vant组件库没有的tree组件(思路至上)^^_

Gz是高手

已于 2024-03-12 14:46:08 修改

阅读量360

点赞数 2

文章标签： vue.js javascript

于 2024-03-12 11:01:31 首次发布

本文链接：https://blog.csdn.net/Gzzzzhj/article/details/136644799

版权

曾经去面试的时候面试官问我，如果让你单独封装一个tree组件，你有什么思路？我语塞，平时基于组件库开发惯了，痛定思痛封装一个！

需求：

后端返回的树形数据结构：

首先创建一个classTree.vue文件，在父组件中把后端返回的数组传入

<classTree :list="list" />

在classTree文件中接收这个数组，并且循环展示这个数组，重点是在classTree这个文件中，再次写上classTree这个组件，循环list中的children数组，如果没有children数组了则不展示，达到树形结构的效果，代码：

<template>
  <div class="tree-wrap">
    <div class="tree-level" v-for="(item, index) in list" :key="index">
      <div class="item-box" @click="toggleShow(item)">
        <span class="item-name">{{ item.className }}</span>
        <div class="icon-box" v-show="item.children && item.children.length">
          <van-icon class="item-icon" name="arrow" v-show="!item.showChild" />
          <van-icon
            class="item-icon"
            name="arrow-down"
            v-show="item.showChild"
          />
        </div>
      </div>
      <classTree
        v-if="item.children.length && item.showChild"
        :list="item.children"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "classTree",
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods: {
    toggleShow(item) {
      if (item.children && item.children.length > 0) {
        item.showChild = !item.showChild;
      } else {
        console.log('点击进想进入的页面')
      }
    }
  }
};
</script>