1.0.12 • Published 5 years ago

v-org-tree v1.0.12

Weekly downloads
862
License
MIT
Repository
github
Last release
5 years ago

v-org-tree

npm Build Status

v-org-tree是一个基于Vue.js2封装的组织结构树组件,支持自定义节点和收缩按钮,高自由度定制,有水平和垂直两种方向。

本插件借鉴了vue-org-tree实现数据到结构树的呈现。优化了对数据的更新以及一些操作的方式,添加了一些api。

作者系列视频课程:

Vue技术栈开发实战(26课时)

TypeScript完全解读(26课时)

进群和3500+前后端开发者交流学习

image

Install

npm install v-org-tree

Use

import OrgTree from 'v-org-tree'
import 'v-org-tree/dist/v-org-tree.css'
Vue.use(OrgTree)

Develop

npm install
npm run serve

Props

propdescriptontypedefault
data传入的树状数据Object-
horizontal是否垂直Booleanfalse
props用来指明数据中几个重要字段的命名Object{ id: 'id', label: 'label', children: 'children', expand: 'expand' }
label-width节点的宽度,不设则随文字宽度自适应String | Number'auto'
collapsable是否可收缩Booleantrue
node-render渲染节点的render函数Function-
button-render渲染收缩按钮的render函数Function-
label-class-name节点自定义类名,可以是函数,参数是当前节点数据对象Function | String-
expandAll是否展开所有节点Booleanfalse

Events

eventdescriptonarguments
on-expand当任一节点收缩状态改变时触发data(当前节点数据), status(当前节点是否展开)
on-node-click点击节点时触发event(鼠标事件对象), data(当前节点数据), expand(是一个方法,如果点击该节点需要收缩,需要调用次方法)