⼀个vue树形插件vue-simple-tree
在实际项⽬中经常⽤到tree视图，发现了⼏个vue的tree插件，但都不是太适合⾃⼰项⽬，花了⼀些⼼思写了⼀个插件，简单灵活，适合⼤部分项⽬。
望不吝Star！
介绍
⼀个简单灵活的vue.js树形组件，可作为插件使⽤，也可直接作为component使⽤
使⽤时只需传⼊⼀个树形数据绑定。
组件还提供了增删改查事件，你可以很⽅便的在组件上监听。
不⽌这些，
可定制的增删改查事件
复选框显⽰可选
初始化展开层级
初始化勾选
可选的按钮图标
⽗节点半选状态⽀持
显⽰字段⾃定义
...
演⽰
A
安装
# install
npm install vue-simple-tree --sve-dev
vuejs流程图插件数据格式
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。