vue递归组件实现树形结构

最新推荐文章于 2024-07-25 09:37:37 发布

FFF-X

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量308

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_66591252/article/details/129880557

版权

直接上代码:

父组件:

<template>
  <div class="home">
 
   <tree :title="list.name" :list="list.children" :detph="0"></tree>
  </div>
</template>

<script>
import tree from '../components/tree'
export default {
  name: "Home",
  components: {
    tree
  },
  data: function() {
    return {
      list: {
        name: "酒店",

        children: [
          {
            name: "经济",
            children: [
              {
                name: "如家",
                children: [
                  {
                    name: "长江路-如家"
                  },
                  {
                    name: "望江路-如家"
                  }
                ]
              },
              {
                name: "7天",
                children: [
                  {
                    name: "长江路-7天"
                  },
                  {
                    name: "望江路-7天"
                  }
                ]
              }
            ]
          },
          {
            name: "舒适",
            children: [
              {
                name: "智选假日",
                children: [
                  {
                    name: "卧龙路-智选假日"
                  },
                  {
                    name: "望江路-智选假日"
                  }
                ]
              },
              {
                name: "全季",
                children: [
                  {
                    name: "卧龙路-全季"
                  },
                  {
                    name: "建设路-全季"
                  }
                ]
              }
            ]
          },
          {
            name: "商务",
            children: [
              {
                name: "中方商务",
                children: [
                  {
                    name: "卧龙路-中方商务"
                  },
                  {
                    name: "望江路-中方商务"
                  }
                ]
              },
              {
                name: "锦江之星",
                children: [
                  {
                    name: "人民路-锦江之星"
                  },
                  {
                    name: "新华路-锦江之星"
                  }
                ]
              }
            ]
          }
        ]
      }
    };
  },
  methods: {}
};
</script>
<style scoped>
.ww {
  margin-left: 20px;
}
.hh {
  font-size: 10px;
}
</style>

子组件:

<!--  -->
<template>
  <div>
    <div :style="getDetph">
      <!-- 显示隐藏 -->
      <div @click="getData ">
        <!-- 这里呢如果为真的话就显示那么就是减号否则的话就是加号 -->
        <span >{{isShow?'-':'+'}}</span>{{title}}</div>
      <!-- 那么在这里我们就需要改成 item.name和item.children -->
      <div v-if="isShow">
        <tree
          :title="item.name"
          :list="item.children"
          v-for="(item,index) in list"
          :key="index"
          :detph="detph+1"
        >
          <!-- 每次递增1 -->
        </tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tree",
  components: {},
  data: function() {
    return {
      isShow: false
    };
  },
  props: {
    // 接收标题
    title: {
      type: String
      // default: "标题"
    },
    // 接收一整个数组
    list: {
      type: Array
    },
    // 用来接收层数
    detph: {
      type: Number
    }
  },
  // 计算属性用来接收我们的层数
  computed: {
    getDetph() {
      return `transform:translate(${this.detph * 20}px)`;
    }
  },
  methods: {
    getData: function() {
      this.isShow = !this.isShow;
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>

效果图: