相信大家做过CRM管理系统的人应该都有遇到那种树形结构展示的需求,比如公司架构,用金字塔的树形结构展示我觉得是最明显的了。

Github链接(https://github.com/yuanjie007/vue-tree)

先来看下效果图:
vue树形结构展示插件

安装:

$ 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,或者在下方评论留言。