在实际项目中经常用到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"
}
]
}
]
}]
}使用示例
有两种使用方法:
-
局部注册component(推荐)
App.vue -
全局注册，通过插件形式注册全局component
main.jsimport App from './App' import Vuetree from 'vue-simple-tree' Vue.use(Vuetree); new Vue({ el: '#app', template: '', components: { App } }) App.vue
设置选项
以下是默认设置.
你可以在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到监听器
监听器
如果需要，你可以选择绑定这些事件的其中一个或多个。
为绑定的事件定义监听方法，这些方法都接收一个当前操作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