基於Vue的組織架構樹元件

Cocokai發表於2019-03-04
Vue架構元件

由於公司業務需求，需要開發一個展示組織架構的樹元件（公司的專案是基於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>
複製程式碼

然後渲染這個這個元件，效果如下

基於Vue的組織架構樹元件

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

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

需求說：節點的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：

  1. 首先我們實現一個render函式

    export const render = (h, context) => {
  const {props} = context
  return renderNode(h, props.data, context)
}
複製程式碼

  2. 實現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)
}
複製程式碼

  3. 實現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)
}
複製程式碼

  4. 實現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繪製

功能擴充套件

  • 新增了 labelClassName 屬性，以支援對節點label的樣式定製
  • 新增了 labelWidth 屬性，用於限制節點label的寬度
  • 新增了 props 屬性，參考element-ui的tree元件的props屬性，以支援複雜的資料結構
  • 新增了 collapsable 屬性，以支援子節點的展開和摺疊（展開和摺疊操作需呼叫者實現）

剛開始採用了flex佈局，但是要相容IE9，後來改成了display: table佈局

最終效果

  • default

    基於Vue的組織架構樹元件

  • horizontal

    基於Vue的組織架構樹元件

問題總結

  • 可以定義一個樹的store，儲存每個節點狀態，這樣就可以在內部維護樹節點的展開可收起狀態

最後附上原始碼傳送門：github.com/hukaibaihu/… !

參考資料

github.com/HigorSilvaR…

相關文章