ztree异步加载节点的时候需要提供一个url。ztree初始化完会向这个url发送一次请求注意这个时候是不会带参数的。这个时候你需要返回给它你想要的节点。ps:我是返回一个根节点给它。然后在点击此时的节点时候，还是会向这个url发送请求此时会带配置的参数，如果你现在的处理方式和初始化之后那样，就还是返回你开始的那些节点给你。所以，你需要根据不同的动作来处理你的返回值。<pre t="code" l="js">　　async : {

enable : true,

url : _mapurl,//异步路径

autoParam : [;id;,;name; ],//请求携带节点上的属性值

dataFilter : function(treeId, parentNode, childNodes) {

if (!childNodes)return null;

for (var i = 0, l = childNodeslenh; i lt; l; i++) {

var _c=childNodes[i];

_cisParent=_cparent;

childNodes[i]name = _cnamereplace(/\n/g, ;;);

}

return childNodes;

}

},//只是提供处理思路 不需要copy<pre t="code" l="java"> @RequestMapping(;/getOrg;)

@ResponseBody

public Listlt;ObjectTypeBean; getOrg(HttpServletRequest request,ObjectTypeBean bean,@RequestParam Maplt;String,String; para) {

Listlt;OrgBo; list = new ArrayListlt;OrgBo;();

if(parasize()lt;1){

OrgBo bo = null;

bo = orgServicegetOrgByNo(GlobalValueORGROOT);

listadd(bo);

}else{

String id = paraget(;id;);//根据父节点ID获取子节点

list = orgTreeServicegetChildOrgsForTree(id,ConstantsDEFAULT_ORG_RELA_TYPE);//orgSpiServicegetChildOrgs(id, ;;);

}

Listlt;ObjectTypeBean; _list = new ArrayListlt;ObjectTypeBean;(listsize());

for(OrgBo _b : list){

_listadd(new ObjectTypeBean(_bgetNo(), _bgetParentNo(), _bgetShortName(),!_bisLeaf()));

}

return _list;

}

最近公司在做一个基于vue开发的项目，项目需要开发一个展示组织架构的树组件，在网上搜了半天，没有找到合适的，下面小编给大家分享一个基于Vue制作组织架构树组件，需要的朋友参考下吧

由于公司业务需求，需要开发一个展示组织架构的树组件（公司的项目是基于Vue）。在GitHub上找了半天，这类组件不多，也没有符合业务需求的组件，所以决定自己造轮子！

分析

既然是树，那么每个节点都应该是相同的组件

节点下面套节点，所以节点组件应该是一个 递归组件

那么，问题来了。递归组件怎么写？

递归组件

Vue官方文档是这样说的：

组件在它的模板内可以递归地调用自己。不过，只有当它有 name 选项时才可以这么做

接下来，我们来写一个树节点递归组件：

<template>

<p class="org-tree-node">

<p class="org-tree-node-label">{{datalabel}}</p>

<p class="org-tree-node-children" v-if="datachildren">

<org-tree-node v-for="node in datachildren" :data="node" :key="dataid"></org-tree-node>

</p>

</p>

</template>

<script>

export default {

name: 'OrgTreeNode',

props: {

data: Object

}

}

</script>

<style>

/ /

</style>然后渲染这个这个组件，效果如下

至此，一个简单的组织架构树组件就完成了。

然而，事情还远远没有结束。。

需求说：节点的label要支持定制，树要支持水平展示！

因此，我们对递归组件作如下修改：

<template>

<p class="org-tree-node">

<p class="org-tree-node-label">

<slot>{{datalabel}}</slot>

</p>

<p class="org-tree-node-children" v-if="datachildren">

<org-tree-node v-for="node in datachildren" :data="node" :key="dataid"></org-tree-node>

</p>

</p>

</template>

<script>

export default {

name: 'OrgTreeNode',

props: {

data: Object

}

}

</script>

<style>

/ /

</style>我们使用slot插槽来支持label可定制，但是问题又来了：我们发现只有第一层级的节点label能定制，嵌套的子节点不能有效的传递slot插槽。上网查了半天，仍然没有结果，于是再看官方文档。发现有个函数式组件。由于之前使用过 element-ui 的 tree 组件，受到启发，就想到了可以像 element-ui 的 tree 组件一样传一个 renderContent 函数，由调用者自己渲染节点label，这样就达到了节点定制的目的！

函数式组件

接下来，我们将树节点模板组件改造成函数式组件。编写nodejs：

首先我们实现一个render函数

export const render = (h, context) => {

const {props} = context

return renderNode(h, propsdata, context)

}实现renderNode函数

export const renderNode = (h, data, context) => {

const {props} = context

const childNodes = []

childNodespush(renderLabel(h, data, context))

if (propsdatachildren && propsdatachildrenlength) {

childNodespush(renderChildren(h, propsdatachildren, context))

}

return h('p', {

domProps: {

className: 'org-tree-node'

}

}, childNodes)

}实现renderLabel函数。节点label定制关键在这里：

export const renderLabel = (h, data, context) => {

const {props} = context

const renderContent = propsrenderContent

const childNodes = []

// 节点label定制，由调用者传入的renderContent实现

if (typeof renderContent === 'function') {

let vnode = renderContent(h, propsdata)

vnode && childNodespush(vnode)

} else {

childNodespush(propsdatalabel)

}

return h('p', {

domProps: {

className: 'org-tree-node-label'

}

}, childNodes)

}实现renderChildren函数。这里递归调用renderNode，实现了递归组件

export const renderChildren = (h, list, context) => {

if (ArrayisArray(list) && listlength) {

const children = listmap(item => {

return renderNode(h, item, context)

})

return h('p', {

domProps: {

className: 'org-tree-node-children'

}

}, children)

}

return ''

}至此我们的render函数完成了，接下来使用render函数定义函数式组件。在tree组件里面声明：

<template>

<!-- -->

</template>

<script>

import render from '/nodejs'

export default {

name: 'OrgTree',

components: {

OrgTreeNode: {

render,

// 定义函数式组件

functional: true

}

}

}

</script>至此我们的函数式组件改造完成了，至于水平显示用样式控制就可以了。

CSS样式

样式使用less预编译。节点之间的线条采用了 :before 、 :after 伪元素的 border 绘制

功能扩展

添加了 labelClassName 属性，以支持对节点label的样式定制

添加了 labelWidth 属性，用于限制节点label的宽度

添加了 props 属性，参考 element-ui 的 tree 组件的props属性，以支持复杂的数据结构

添加了 collapsable 属性，以支持子节点的展开和折叠（展开和折叠操作需调用者实现）

刚开始采用了 flex 布局，但是要兼容IE9，后来改成了 display: table 布局

最终效果：

default

horizontal

问题总结

可以定义一个树的store，存储每个节点状态，这样就可以在内部维护树节点的展开可收起状态

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在微信小程序中如何实现上传等一系列功能

在javaScript中有关空值和假值的说法

在Webpack中有关自动化构建（详细教程）

在JavaScript中遇到的BUG

家庭树的英语：family tree。

读音：英 [ˈfæmili tri:]   美 [ˈfæməli tri] 

短语

family mutational tree 家族突变树

Family Love Tree 亲情树

product family structure tree 产品族结构树

a family treefamily tree 家族树

例句

1、Then the sisters began to ponder: where would the little girl sit on the family tree 

这时，姐妹俩开始思考：这个小姑娘在家谱图上应该放在那个位置？

2、I’ve started my family tree and have added a few email addresses 

我已经开始填写我的家谱，并且加上了几个电子邮件地址。

扩展资料

family的意思是“家庭”,指“家庭全体成员”时,为集合名词,作主语时,谓语动词要用复数形式。作为“家庭整体”看待时,谓语动词要用单数形式。谓语动词无论是单数形式还是复数形式, family都应该用复数代词指代。

family有时可作“子女,孩子”解,此时不含父母,是单数名词,但可与不定冠词a或an连用。

family作先行词时,其关系代词可用who,也可用which。如表示家庭成员,则一般用who;如表示家庭整体,则一般用which。