Giter Club home page Giter Club logo

v-org-tree's Introduction

v-org-tree

npm Build Status

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

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

作者系列视频课程:

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

TypeScript完全解读(26课时)

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

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

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

Events

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

v-org-tree's People

Contributors

lison16 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.