基于Vue制作組織架構樹組件

2019-11-19 14:46:47

字體：大中小

來源：轉載

供稿：網友

由于公司業務需求，需要開發一個展示組織架構的樹組件（公司的項目是基于Vue）。在GitHub上找了半天，這類組件不多，也沒有符合業務需求的組件，所以決定自己造輪子！

分析

既然是樹，那么每個節點都應該是相同的組件
節點下面套節點，所以節點組件應該是一個遞歸組件

那么，問題來了。遞歸組件怎么寫？

遞歸組件

Vue官方文檔是這樣說的：

組件在它的模板內可以遞歸地調用自己。不過，只有當它有 name 選項時才可以這么做

接下來，我們來寫一個樹節點遞歸組件：

<template> <div class="org-tree-node"> <div class="org-tree-node-label">{{data.label}}</div>  <div class="org-tree-node-children" v-if="data.children">  <org-tree-node v-for="node in data.children" :data="node" :key="data.id"></org-tree-node> </div> </div></template><script> export default { name: 'OrgTreeNode', props: {  data: Object } }</script><style> /* ... */</style>

然后渲染這個這個組件，效果如下

至此，一個簡單的組織架構樹組件就完成了。

然而，事情還遠遠沒有結束。。。

需求說：節點的label要支持定制，樹要支持水平展示！

因此，我們對遞歸組件作如下修改：

<template> <div class="org-tree-node"> <div class="org-tree-node-label">  <slot>{{data.label}}</slot> </div>  <div class="org-tree-node-children" v-if="data.children">  <org-tree-node v-for="node in data.children" :data="node" :key="data.id"></org-tree-node> </div> </div></template><script> export default { name: 'OrgTreeNode', props: {  data: Object } }</script><style> /* ... */</style>

我們使用slot插槽來支持label可定制，但是問題又來了：我們發現只有第一層級的節點label能定制，嵌套的子節點不能有效的傳遞slot插槽。上網查了半天，仍然沒有結果，于是再看官方文檔。發現有個函數式組件。由于之前使用過 element-ui 的 tree 組件，受到啟發，就想到了可以像 element-ui 的 tree 組件一樣傳一個 renderContent 函數，由調用者自己渲染節點label，這樣就達到了節點定制的目的！

函數式組件

接下來，我們將樹節點模板組件改造成函數式組件。編寫node.js：

首先我們實現一個render函數

export const render = (h, context) => { const {props} = context return renderNode(h, props.data, context)}

實現renderNode函數

export const renderNode = (h, data, context) => { const {props} = context const childNodes = [] childNodes.push(renderLabel(h, data, context)) if (props.data.children && props.data.children.length) { childNodes.push(renderChildren(h, props.data.children, context)) } return h('div', { domProps: { className: 'org-tree-node' } }, childNodes)}

實現renderLabel函數。節點label定制關鍵在這里：

export const renderLabel = (h, data, context) => { const {props} = context const renderContent = props.renderContent const childNodes = [] // 節點label定制，由調用者傳入的renderContent實現 if (typeof renderContent === 'function') { let vnode = renderContent(h, props.data) vnode && childNodes.push(vnode) } else { childNodes.push(props.data.label) } return h('div', { domProps: { className: 'org-tree-node-label' } }, childNodes)}

實現renderChildren函數。這里遞歸調用renderNode，實現了遞歸組件

export const renderChildren = (h, list, context) => { if (Array.isArray(list) && list.length) { const children = list.map(item => { return renderNode(h, item, context) }) return h('div', { domProps: { className: 'org-tree-node-children' } }, children) } return ''}

至此我們的render函數完成了，接下來使用render函數定義函數式組件。在tree組件里面聲明：

<template> <!-- ... --></template><script> import render from './node.js' export default { name: 'OrgTree', components: {  OrgTreeNode: {  render,  // 定義函數式組件  functional: true  } } }</script>

至此我們的函數式組件改造完成了，至于水平顯示用樣式控制就可以了。

CSS樣式

樣式使用less預編譯。節點之間的線條采用了 :before 、 :after 偽元素的 border 繪制

功能擴展