脚本宝典收集整理的这篇文章主要介绍了一个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"
}
]
}
]
}]
}
有两种使用方法:
局部注册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>
全局注册,通过插件形式注册全局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
以上是脚本宝典为你收集整理的一个vue树形插件vue-simple-tree全部内容,希望文章能够帮你解决一个vue树形插件vue-simple-tree所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。