vue组件-文件树

最新推荐文章于 2025-06-19 09:14:12 发布

shayminsky

最新推荐文章于 2025-06-19 09:14:12 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue学习文章标签： html vue-js 文件树文件树组件

本文链接：https://blog.youkuaiyun.com/shayminsky/article/details/78540100

vue学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue.js中创建一个文件树组件，详细讨论了组件的设计思路和实现过程，包括HTML结构、Vue.js指令的使用以及如何通过数据驱动展示文件层级结构。通过这个教程，读者将学会构建一个功能完善的文件树组件。

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

本文主要是分析vue官方仓库里的文件树组件[vue github](https://github.com/vuejs/vue/tree/dev/examples/tree)
demo可以查看 https://codepen.io/shayminsky21/pen/xXwxgm
首先是html模板：

<li>
        <div
          //文件夹加粗表示
          :class="{bold: isFolder}"   
          //处理单击事件 打开闭合文件列表                                              
          @click="toggle"       
          //处理双击事件 双击子文件，子文件属性变为文件夹                                                         
          @dblclick="changeType">     
         //显示文件名                      
          {{model.name}}
        //若是文件夹的话则显示[+]来控制文件夹的开关闭合
          <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
        </div>
        <ul v-show="open" v-if="isFolder">
        //利用v-for显示子文件列表，通过递归使用item组件来完成文件树
          <item
            class="item"
            v-for="model in model.children"
            :model="model">
          </item>
          //增加一个+标记，单击可以增加子文件
          <li class="add" @click="addChild">+</li>
        </ul>
</li>

接下来是组件部分的源码：
Vue.component('item', {
  template: '#item-template',
  props: {
    model: Object   //将文件数据通过props传入
  },
  data: function () {
    return {
      open: false       //open表示文件夹闭合状态
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
        this.model.children.length
    }
  },    //计算对象是否有子节点并且子节点数大于0来判断是否是文件夹
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },              //控制文件夹闭合的方法 单击触发改变open
    changeType: function () {
      if (!this.isFolder) {
        Vue.set(this.model, 'children', [])
        this.addChild()
        this.open = true
      }
    },   //双击触发，通过给文件增加子节点来使文件属性变成文件夹
    addChild: function () {
      this.model.children.push({
        name: 'new stuff'
      })     //点击文件夹里的+节点触发  为文件夹添加一个新文件
    }            
  }
})

所以设计思路就是通过判断对象是否有子节点来决定是文件夹还是文件，然后通过递归复用<item>组件来展示文件树的效果。

最后是传入组件的数据格式：
var data = {
  name: 'My Tree',
  children: [
    { name: 'hello' },
    { name: 'wat' },
    {
      name: 'child folder',
      children: [
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        },
        { name: 'hello' },
        { name: 'wat' },
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        }
      ]
    }
  ]
}

大家可以根据这个基本的结构继续拓展文件树的功能和展示效果