一个vue树形插件vue-simple-tree

在实际项目中经常用到tree视图，发现了几个vue的tree插件，但都不是太适合自己项目，花了一些心思写了一个插件，简单灵活，适合大部分项目。

Github 望不吝Star！

介绍

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

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

组件还提供了增删改查事件，你可以很方便的在组件上监听。

不止这些，

• 可定制的增删改查事件
• 复选框显示可选
• 初始化展开层级
• 初始化勾选
• 可选的按钮图标
• 父节点半选状态支持
• 显示字段自定义
• ...

演示

A Demo

安装

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

数据格式

treeData

id必要属性,Number

name必要属性,String,可自定义,默认name,如options.itemName:'display_name'

children非必要,Array

treeData示例

{
"data": [{
    "id": "1",
    "name": "Root",
    "children": [
      {
        "id": "2",
        "name": "Node2"
      },
      {
        "id": "3",
        "name": "Node3"
      },
      {
        "id": "4",
        "name": "Node4",
        "children": [
          {
            "id": "5",
            "name": "Node5"
          }
        ]
      }
    ]
  }]
}

使用示例

有两种使用方法:

1. 局部注册component(推荐)

   App.vue

   <template>
     <div id="app">
         <vue-tree v-model="checkedIds" :tree-data="treeData" :options="options"></vue-tree>
     </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>

2. 全局注册，通过插件形式注册全局component

   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"></vue-tree>
     </div>
   </template>
   
   <script>
   import Tree from 'tree.json';
   export default {
       name: 'app',
       data () {
           return {
               checkedIds: [],
               treeData: Tree.data,
               options: {}
           }
       }
   }
   </script>

设置选项

以下是默认设置.

你可以在options里覆盖默认设置，或仅设置若干项options: {someOption: true}

你也可以绑定一个空的对象:options="{}"或直接忽略options

options: {
    // String,节点显示字段
    itemName: 'name',
    
    // Boolean,是否显示添加子节点按钮
    addItem: true,
    
    // Boolean,是否显示选择框
    checkbox: true,
    
    // Array,初始化时选中id (v2.1以后不推荐使用，v3.0将废弃),替代方法见'#使用示例'章节
    checkedIds: [], 
    
    // Boolean,选中时是否展开节点
    checkedOpen: true,
    
    // Boolean,目录是否加粗显示
    folderBold: true,
    
    // String,展开按钮(默认依赖font-awesome)
    openClass: 'fa fa-plus-square text-info',
    
    // String,收缩按钮(默认依赖font-awesome)
    closeClass: 'fa fa-minus-square text-danger',
    
    // String,添加节点按钮(默认依赖font-awesome)
    addClass: 'fa fa-plus text-danger',
    
    // Boolean,是否显示编辑按钮
    showEdit: true,
    
    // Boolean,是否显示删除按钮
    showDelete: true,
    
    // String,编辑按钮(默认依赖font-awesome)
    editClass: 'fa fa-edit',
    
    // String,删除按钮(默认依赖font-awesome)
    deleteClass: 'fa fa-trash-o'
    
    // (v2.1新增) Boolean,获取复选项目是否包含目录,默认`true`,如果只获取叶子节点设置为`false`
    idsWithParent: true
    
    // (v2.1新增) Number,初始化时展开层级,根节点为0,默认0
    depthOpen: 0
}

注意：默认设置使用了font-awesome的图标，
如果你继续使用默认设置，请引入这个css库

如何获取复选数据?

自v2.1起,不再从options.checkedIds获取复选数据,
而是使用v-model="checkedIds"获取复选id.

默认情况下获取的ids是包含所有上级目录的,如果你想获取只包含叶子节点的ids,设置options.idsWithParent为false

事件

item-click、add-a-child、 item-edit 、item-delete 分别为点击节点、添加子节点、编辑节点、删除节点事件。

这些事件绑定了操作id到监听器

监听器

如果需要，你可以选择绑定这些事件的其中一个或多个。

<vue-tree 
    v-model="ids"
    :tree-data="treeData"
    :options="options"
    @add-a-child="addAChild"
    @item-click="itemClick"
    @item-edit="itemEdit"
    @item-delete="itemDelete">
</vue-tree>

为绑定的事件定义监听方法，这些方法都接收一个当前操作id作为参数

methods: {
    addAChild(id) {
        console.log('点击了添加子节点按钮，父节点ID[' + id + ']')
    },
    itemClick(id) {
        console.log('点击了节点，节点ID[' + id + ']')
    },
    itemEdit(id) {
        console.log('点击了编辑按钮，节点ID[' + id + ']')
        },
    itemDelete(id) {
        console.log('点击了删除按钮，节点ID[' + id + ']')
    }
}

样式

如果你想修改默认样式，一切都为你准备好了，只需要重新定义以下css类

.vue-tree

.vue-tree .vue-tree-item

.vue-tree .item-wrapper

.vue-tree .item-wrapper .item-toggle

.vue-tree .item-wrapper .item-btn

.vue-tree .item-wrapper .item-btn .add-btn

.vue-tree .item-wrapper .item-btn .edit-btn

.vue-tree .item-wrapper .item-btn .delete-btn

.vue-tree-list