Vue3-jstree

Vue3-jstree

vue3版本的树形目录结构， A tree component for vue3
在线例子
example 代码

介绍

vue3-jstree是基于vue3的开发的树形文件组件。

目前不支持在vue2.x版本中使用。

属性

属性	说明	类型	默认值
data	tree 的展示数据	array	[]
highlight-current	是否高亮当前选中节点	boolean	false
default-expand-all	是否默认展开所有节点	boolean	false

安装和使用

初始化vue项目

这里的例子是使用vite创建的项目，如果想使用vue-cli创建创建项目，必须选vue3版本，目前不支持vue2.x。也可以看example里面的示例。

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

NPM

安装vue3-jstree

npm i vue3-jstree --save

按需引用

index.vue template中使用v-tree

// index.vue
<template>
  <v-tree
    :data="data"
  />
</template>

index.vue 引入组件，和对应的样式(全局引入样式)

<script setup>
import { VTree } from 'vue3-jstree'
import 'vue3-jstree/dist/style.css'

// 声明的数据
const data = [
  {
    text: "文件",
    children: [
      {
        text: "文件1",
        children: [
          {
            text: "文件1",
          },
          {
            text: "文本3",
          },
        ],
      },
      {
        text: "文件3",
      },
    ],
  },
]
</script>

全局组件注册

在main.js 引入VTree，全局注册

import { createApp } from 'vue'
import App from './App.vue'

+ import VTree from 'vue3-jstree'
+ import 'vue3-jstree/dist/style.css'

createApp(App)
+  .use(VTree)
   .mount('#app')

index.vue template中使用v-tree

// index.vue
<template>
  <v-tree
    :data="data"
  />
</template>

index.vue 声明data数据

<script setup>
const data = [
  {
    text: "文件",
    children: [
      {
        text: "文件1",
        children: [
          {
            text: "文件1",
          },
          {
            text: "文本3",
          },
        ],
      },
      {
        text: "文件3",
      },
      {
        text: "文件3",
      },
    ],
  },
]
</script>

交流

欢迎一起交流

公众号：不定期输出技术文章，个人的经历分享，做开源的感悟等等，欢迎关注一起交流

微信号：联系我，可以关注公众号，点击关于 -> 与我联系，获取微信号。感兴趣的小伙伴可以一起沟通交流，一起学习，一起进步。