Vue.js的动态树组件 - vue-tree

Vue.js的动态树组件 - vue-tree
插件名称 vue-tree
发布时间 2020年12月4日
插件作者 jiaxincui

一个简单灵活的vue.js树形组件,可作为插件使用,也可直接作为component使用

使用时只需传入一个树形数据绑定。

组件还提供了handle事件,你可以很方便的在组件上监听。

不止这些,

  • 高效的计算方法
  • 可定制的选择框样式
  • 复选框显示可选
  • 初始化展开层级
  • 初始化勾选
  • 可选的按钮图标
  • 父节点半选状态支持
  • 显示字段自定义
  • 事件监听

安装和下载:

npm install vue-simple-tree --sve-dev

使用示例

有两种使用方法:

  1. 局部注册App.vue
<template>
  <div id="app">
    <vue-tree
      v-model="checkedIds"
      :tree-data="treeData"
      :options="options"
    />
  </div>
</template>

<script>
import VueTree from 'vue-simple-tree/src/components/VueTree.vue'
import Tree from './tree.json'

export default {
  name: 'app',
  components: { VueTree },
  data () {
    return {
      // 复选ids,可传入id数组作为初始选中状态,如[3,4,8]
      checkedIds: [],
      // tree数据
      treeData: Tree.data,
      // 设置项
      options: {}
    }
  }
}
</script>

通过插件形式全局注册

main.js

import App from './App'
import Vuetree from 'vue-simple-tree'

Vue.use(Vuetree)

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

App.vue

<template>
  <div id="app">
    <vue-tree
      v-model="checkedIds"
      :tree-data="treeData"
      :options="options"
    />
  </div>
</template>

<script>
import Tree from './tree.json';
export default {
  name: 'app',
  data () {
    return {
      checkedIds: [],
      treeData: Tree.data,
      options: {}
    }
  }
}
</script>