vue3-file-tree

文件树

vue3-file-tree的安装

pnpm 安装

pnpm add vue3-file-tree

npm 安装

npm install vue3-file-tree

vue3-file-tree的使用

配置

props:
    treeData: TreeList // 数据树
    defaultFile?: number // 默认选中文件
    expandAll?: boolean // 是否全展开
    customize?: boolean // 自定义folder和file
    space?: number // 每层之间的间距，默认20

emits:
    change(file) // file的类型结构为FileType

数据类型type

interface FolderType {
  id: number
  isOpen?: boolean // 是否打开目录
  name: string
  children: TreeList
  isFolder: boolean
  level?: number // 层级
  parentId?: number // 上层目录id，最上层默认为0
  [key: string]: any
}

interface FileType {
  id: number
  name: string
  isFolder?: boolean
  level?: number // 层级
  parentId?: number // 上层目录id，最上层默认为0
  [key: string]: any
}

type TreeList = (FolderType | FileType)[]

使用范例

样式文件 src/components/global.scss

样式文件需要手动导入，也可以使用自己的样式

// 导入默认样式
// 需要安装sass
// npm i -D sass
import 'vue3-file-tree/dist/global.scss'

操作树方法

使用ref获取Tree component，调用方法

// 更新树的参数，updateObject可以是FileType或FolderType里部分参数
update(id: number, updateObject: { [key: string]: any })
// id为文件的id，这个方法不会选中文件，只展开
expand(id: number)
// id为文件的id，这个方法会选中文件，并展开，还会调用change方法
setActiveFile(id: number)

范例文件：App.vue

<script setup lang="ts">
import { Tree } from './components'
import type { FileType, TreeList } from './components/type'
import './components/global.scss'
import { onMounted, ref } from 'vue'
const treeData: TreeList = [
  {
    id: 88,
    name: 'Fire fire',
    isFolder: true,
    children: [
      {
        id: 89,
        name: 'good'
      },
      {
        id: 78,
        name: 'Fire fire2',
        isFolder: true,
        children: [
          {
            id: 790,
            name: 'good2'
          }
        ]
      }
    ]
  },
  {
    id: 79,
    name: 'good2'
  },
  {
    id: 80,
    name: 'Fire fire4',
    isFolder: true,
    children: []
  }
]

const change = (file: FileType) => {
  console.log(file)
}
const tree = ref()

onMounted(() => {
  setTimeout(() => {
    tree.value.update(79, { name: 'test' })
  }, 1000)

  setTimeout(() => {
    tree.value.expand(790)
  }, 2000)

  setTimeout(() => {
    tree.value.setActiveFile(790)
  }, 3000)
})
</script>

<template>
  <div class="tree-template">
    <Tree
      ref="tree"
      :treeData="treeData"
      :defaultFile="79"
      :expandAll="false"
      @change="change"
      :customize="false"
    >
      <template #folder="{ folder }"> folder:{{ folder.name }} </template>
      <template #file="{ file }"> file:{{ file.name }} </template>
    </Tree>
  </div>
</template>
<style lang="scss">
.tree-template {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 400px;
  left: 0;
  background-color: #fff;
}
</style>

</style>