Code Monkey home page Code Monkey logo

vue-org-tree's Introduction

vue-org-tree

A simple organization tree chart based on Vue2.x

Usage

NPM

# use npm
npm i vue2-org-tree

# use yarn
yarn add vue2-org-tree

Import Plugins

import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'

Vue.use(Vue2OrgTree)

// ...

CDN

# css
<link href="https://unpkg.com/vue2-org-tree/dist/style.css">

# js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-org-tree/dist/index.js"></script>

API

props

prop descripton type default
data Object
props configure props Object {label: 'label', children: 'children', expand: 'expand'}
labelWidth node label width String | Number auto
collapsable children node is collapsable Boolean true
renderContent how to render node label Function -
labelClassName node label class Function | String -
selectedKey The key of the selected node String -
selectedClassName The className of the selected node Function | String -

events

event name descripton type
click Click event Function
mouseover onMouseOver event Function
mouseout onMouseOut event Function

Call events

on-expand

well be called when the collapse-btn clicked

  • params e Event
  • params data Current node data

on-node-click

well be called when the node-label clicked

  • params e Event
  • params data Current node data

on-node-mouseover

It is called when the mouse hovers over the label.

  • params e Event
  • params data Current node data

on-node-mouseout

It is called when the mouse leaves the label.

  • params e Event
  • params data Current node data

Example

  • default

    default

  • horizontal

    horizontal

Browser support

use table layout!

IE9+、Chrome、Firefox、Opera

License

MIT

vue-org-tree's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-org-tree's Issues

Vue components for nodes

Is it possible to use Vue components for nodes representing instead of div?

And handle events (click, ...) in these components. It will allow easily customize nodes.

Also it could be useful to use components for expand buttons.

Publish to NPM

Hey,

I request you to publish this library to NPM in order to support easy installation.

And Publishing to NPM will also allow browser usage for the module using

<script type="text/javascript">
  Vue.use(VueOrgTree);
</script>

Please let me know if you decide to do it.

刚运行报错怎么办

ERROR in ./src/components/org-tree/org-tree.vue
Module not found: Error: Can't resolve 'vue' in '/Users/y1/Desktop/vue-org-tree-master 2/src/components/org-tree'
@ ./src/components/org-tree/org-tree.vue 33:17-31
@ ./src/components/org-tree/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./src/main.js

do not load style.css

Hello, friend
I use this components to *.vue with frameword vue-element-admin, but style.css does not loaded,
how can do this?

waiting for your reply

thanks.

on-expand方法失效

on-expand方法在
<Vue2OrgTree
:data="list"
:horizontal="horizontal"
:collapsable="collapsable"
@on-expand="onExpand"
@on-node-click="handleClick"
/>
中失效,只对on-node-click方法有响应

使用浏览器 chrome浏览器 版本 76.0.3809.100(正式版本) (64 位)

vue版本 2.9.6

样式丢失

vue项目启动后发现,组件有效但是样式丢失,build后才能生效,请问这是为什么?

Rendering issues

image
When my computer’s screen is small or the tree very deep. there is rendering problem make show.

子节点样式错位

父节点 label 较长时,子节点不能准确定位在展开按钮下,会错位

组件宽度问题

横向时组件宽度不会撑开,超过宽度就会换行掉下来。只能把父节点的宽度写死。

expandAll 失效

当data 每项不包含 expand 字段时,expandAll 会不起效,建议组件初始化时,如果配置了该字段,做一次数据遍历

Failed to mount component

cnpm安装后一直提示组件创建失败,参数已经全部带上,想请问是我安装姿势不对还是参数传的有问题
tim 20181215165412

发现了bug

插件的样式不见了,按操作流程是没样式的要把样式直接引入才行,我用的生产环境都炸了,赶紧查查改一版吧,让我更新一把

renderContent

renderContent方法的返回中如何添加换行呢

props 映射有 bug

RT

配置如下:

treeData: {
  ID: 123,
  Label: a,
  Children: []
},

props: {
  label: "Label",
  expand: "expand",
  children: "Children"
}

组件不报错,但就是无法渲染,节点无文案,点击节点却能返回节点数据

报错,是因为 .postcssrc.js

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'

[Question] Is it possible to add a small image beside label?

Is it possible to add an image beside or under the label? If possible, could you give me a simple example how?

Do you plan on making it responsive? I just added a couple of data and it seems that the lines of the tree breaks. Do you have any work arounds for a larger data?

I'm not an expert in Vue yet so I opted to ask. I am thinking of using this instead of Treant.js for our Family Tree chart because of its simplicity and compatibility with Vue.

Great project btw!

Feature - Pan and zoom

Good job on the tree chart @hukaibaihu!

Any chance of adding a pan and zoom feature to it as well? Would be nice when dealing with larger trees where you need zoom out in order for it to fit on the screen.

正式版本在 render 时会打印 listeners

感谢大神提供的组件,最近项目有组织架构的需求正好用到。在组件渲染后我发现控制台打印了一系列 listener,查看了源码发现在 node.js 的 render 函数里有一个 console.log。大神有时间可否考虑去掉这个日志?版本 1.3.1。

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.