vue 递归组件实现目录树，数据处理

最新推荐文章于 2024-11-11 18:32:38 发布

Emma_whm27

最新推荐文章于 2024-11-11 18:32:38 发布

阅读量868

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue js javascript

本文链接：https://blog.youkuaiyun.com/min_Jun0919/article/details/103926667

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的移动端目录树组件代码，通过递归组件展示目录结构，并支持菜单展开与折叠。代码中详细展示了如何自定义样式，以及如何在父组件中调用子组件并传递数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 递归组件实现目录树，数据处理

我这个是移动端的目录树代码都是通用的
第一次发表文章，话不多说直接上代码样式可以自己调整

在这里插入图片描述

子组件ChapterTree.vue

子组件ChapterTree.vue
<template>
  <div>
    <div class="list-item" v-for="(item, index) in chapterList" :key="index">
      <div class="item-name">
        <span @click.stop="openMenu(item, index)">
          {{item.nodeName}}
          <!-- 引入了外部图标-->
          <van-icon
            v-if="item.children && item.children.length > 0"
            :name="item.expanded ? 'arrow-up':'arrow-down'"
          />
        </span>

      </div>
      <div
        :class="item.expanded ? 'open':'close'"
        class="children-item"
        v-if="item.children"
      >
      <!-- 递归调用自身 参数为children -->
        <ChapterTree
          :chapterList="item.children"
          type="detail"
          @close="close"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ChapterTree',
  props: {
    chapterList: {
      type: Array,
      default: () => ([])
    },
    cId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      arrray: this.chapterList,
      showMenu: false
    }
  },
  methods: {
    openMenu (item) {
      if (item.children.length > 0) {
        item.expanded = !item.expanded
      } else {
        this.$router.push(
          { path: `要跳转的路径` }
        )
        this.close()
      }
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>

在父组件ChapterList.vue中调用子组件ChapterTree

父组件ChapterList.vue
<template>
  <div class="chapter">
    <div class="item-name">
      <span class="chapter-tip">共{{chapterDetail.chapterNum}}章节</span>
    </div>
    <ChapterTree class="tree' :chapterList="chapterList" :kId="knowledgeId" @close="close"></ChapterTree>
  </div>
</template>
<script>
import {
  getKnowledgeDetail,
  getTree
} from '@/api/knowledge'
import ChapterTree from './components/chapterTree'
export default {
  name: 'ChapterList',
  components: {
    ChapterTree
  },
  data () {
    return {
      chapterList: [] //后台请求回来的数据
    }
  },
  watch: {
    cId (newVal) {
      this.getTree()
    }
  },
  created () {
    this.getTree()// 获取目录树数据
  },
  methods: {
    getTree () {
      getTree({ collectionId: this.knowledgeId })
        .then(res => {
          this.chapterList = this.dealTree(res.data)
        })
        .catch(err => {
          console.log(err, '错误')
        })
    },
    //递归处理目录数据
    dealTree (menuData) {
      const arr = []
      for (let i = 0; i < menuData.length; i++) {
        const item = menuData[i]
        if (item.children && item.children.length) {
        //如果又自己数据 加一个字段 以便于控制菜单展收
          item.expanded = false
          item.children = this.dealTree(item.children)
        } else {
          item.children = []
        }
        arr.push(item)
      }
      return arr
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>

有问题请留言哦~~~~