相信大家做过CRM管理系统的人应该都有遇到那种树形结构展示的需求，比如公司架构，用金字塔的树形结构展示我觉得是最明显的了。
Github链接(https://github.com/yuanjie007/vue-tree)
先来看下效果图:
安装:
$ npm install v2-tree
引入方式:
import Tree from "v2-tree"
const Tree = require("v2-tree");
<script src="./dist/tree.js"></script>
直接引入的 暴露的全局变量名称是 vueTree
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| sources | 数据结构 | Array | [] |
| handleClick | 单击节点的回调函数 | Function(data,parent,index) | - |
| handleDblclick | 双击节点的回调函数 | Function(data,parent,index) | - |
| handleAdd | 添加节点的回调函数，注意：如果是自定义弹框(showModal)，此回调无效 | Function({params, obj, closeModalCallback}) | - |
| handleEdit | 更改节点的回调函数，注意：如果是自定义弹框(showModal)，此回调无效 | Function({params, obj, closeModalCallback}) | - |
| handleRemove | 删除节点的回调函数 | Function(data, parent, index) | - |
| handleShowModal | 显示自定义添加节点弹框回调函数,必须要有具名插槽slot=“modal”， type=add|edit | Function(type, data, parent, index) | - |
| slot | 具名插槽，请看slot用法 | - | - |
Slot
适用于自定义添加弹框节点
| 名称 | 说明 |
|---|---|
| modal | 自定义添加弹框 |
示例:
需要将平面数组转成数据结构数据，可以看下我的另外一篇文章数组转换数型结构数据
<template>
<div class="tree">
<v2-tree :sources="datas" @handleRemove="removeItem" @handleAdd="addChild"></v2-tree>
</div>
</template>
<script>
import vueTree from 'v2-tree'
import Vue from 'vue';
Vue.use(vueTree);
export default {
data() {
return {
datas: [{"id":1,"name":"金字塔","pid":"0","childs":[{"id":2,"name":"金字塔1","pid":"1","childs":[{"id":5,"name":"金字塔1-1","pid":"2","childs":[{"id":8,"name":"金字塔1-1-1","pid":"5","childs":[{"id":10,"name":"金字塔1-1-1-1","pid":"8","childs":[{"id":28,"name":"金字塔1-1-1-1-1","pid":"10","childs":[{"id":29,"name":"金字塔1-1-1-1-1-1","pid":"28","childs":[{"id":30,"name":"金字塔1-1-1-1-1-1-1","pid":"29"}]}]}]}]},{"id":18,"name":"金字塔1-1-2","pid":"5","childs":[{"id":31,"name":"金字塔1-1-2-1","pid":"18","childs":[{"id":32,"name":"金字塔1-1-2-1-1","pid":"31","childs":[{"id":33,"name":"金字塔1-1-2-1-1-1","pid":"32"}]}]}]}]},{"id":11,"name":"金字塔1-2","pid":"2","childs":[{"id":12,"name":"金字塔1-2-1","pid":"11","childs":[{"id":13,"name":"金字塔1-2-1-1","pid":"12"},{"id":17,"name":"金字塔1-2-1-1","pid":"12"}]}]}]},{"id":3,"name":"金字塔2","pid":"1","childs":[{"id":6,"name":"金字塔2-1","pid":"3","childs":[{"id":9,"name":"金字塔2-1-1","pid":"6","childs":[{"id":19,"name":"金字塔2-1-1-1","pid":"9"},{"id":20,"name":"金字塔2-1-1-2","pid":"9"}]}]},{"id":14,"name":"金字塔2-2","pid":"3"},{"id":15,"name":"金字塔2-3","pid":"3"},{"id":16,"name":"金字塔2-4","pid":"3"}]}]},{"id":24,"name":"金字塔嘿嘿嘿","pid":"0","childs":[{"id":23,"name":"金字塔3","pid":"24","childs":[{"id":26,"name":"金字塔3-1","pid":"23"}]},{"id":25,"name":"金字塔4","pid":"24","childs":[{"id":27,"name":"金字塔4-1","pid":"25"}]}]}]
};
},
methods: {
/**
* 添加节点
* params: {
* type: 1|2 1是添加兄弟节点 2是添加节点
* name: '金字塔' 节点名称
* }
* obj: {
* data: {} 当前操作的对象
* parent: [] 当前操作的对象的父级数据
* index: 1 当前操作对象的索引
* }
* closeModalCallback 关闭弹窗的回调参数
*/
addChild({params, obj, closeModalCallback}) {
if (params.type == 2) {
if(!obj.data.childs){
this.$set(obj.data, 'childs', []);
}
obj.data.childs.push({name: params.name})
}else{
obj.parent.push({name: params.name})
}
closeModalCallback();
},
/***
* 删除节点
* data: {} 当前操作的对象
* parent: [] 当前操作的对象的父级数据
* index: 1 当前操作对象的索引
*/
removeItem(data, parent, index) {
parent.splice(index, 1)
}
}
};
</script>
还可以自定义弹框:
<v2-tree>
<template slot="modal"><div>自定义弹框内容</div></template>
</v2-tree>
结语:
第一次发布npm的包，遇到了很多的坑，比如打包问题，npm发布问题等等，插件可能也写的不是很好，但是这是一个明显的进步，万事开头难(ฅ´ω`ฅ)
如果有bug可以去Github那里去提issue，或者在下方评论留言。