基于Vue制作組織架構(gòu)樹組件

小編給大家分享一下基于Vue制作組織架構(gòu)樹組件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供隆昌網(wǎng)站建設(shè)、隆昌做網(wǎng)站、隆昌網(wǎng)站設(shè)計(jì)、隆昌網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、隆昌企業(yè)網(wǎng)站模板建站服務(wù)，十年隆昌做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

由于公司業(yè)務(wù)需求，需要開發(fā)一個(gè)展示組織架構(gòu)的樹組件（公司的項(xiàng)目是基于Vue）。在GitHub上找了半天，這類組件不多，也沒(méi)有符合業(yè)務(wù)需求的組件，所以決定自己造輪子！

分析

• 既然是樹，那么每個(gè)節(jié)點(diǎn)都應(yīng)該是相同的組件

• 節(jié)點(diǎn)下面套節(jié)點(diǎn)，所以節(jié)點(diǎn)組件應(yīng)該是一個(gè) 遞歸組件

那么，問(wèn)題來(lái)了。遞歸組件怎么寫？

遞歸組件

Vue官方文檔是這樣說(shuō)的：

組件在它的模板內(nèi)可以遞歸地調(diào)用自己。不過(guò)，只有當(dāng)它有 name 選項(xiàng)時(shí)才可以這么做

接下來(lái)，我們來(lái)寫一個(gè)樹節(jié)點(diǎn)遞歸組件：

<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>

然后渲染這個(gè)這個(gè)組件，效果如下

 

至此，一個(gè)簡(jiǎn)單的組織架構(gòu)樹組件就完成了。

然而，事情還遠(yuǎn)遠(yuǎn)沒(méi)有結(jié)束。。。

需求說(shuō)：節(jié)點(diǎn)的label要支持定制，樹要支持水平展示！

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

<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插槽來(lái)支持label可定制，但是問(wèn)題又來(lái)了：我們發(fā)現(xiàn)只有第一層級(jí)的節(jié)點(diǎn)label能定制，嵌套的子節(jié)點(diǎn)不能有效的傳遞slot插槽。上網(wǎng)查了半天，仍然沒(méi)有結(jié)果，于是再看官方文檔。發(fā)現(xiàn)有個(gè)函數(shù)式組件。由于之前使用過(guò) element-ui 的 tree 組件，受到啟發(fā)，就想到了可以像 element-ui 的 tree 組件一樣傳一個(gè) renderContent 函數(shù)，由調(diào)用者自己渲染節(jié)點(diǎn)label，這樣就達(dá)到了節(jié)點(diǎn)定制的目的！

函數(shù)式組件

接下來(lái)，我們將樹節(jié)點(diǎn)模板組件改造成函數(shù)式組件。編寫node.js：

首先我們實(shí)現(xiàn)一個(gè)render函數(shù)

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

實(shí)現(xiàn)renderNode函數(shù)

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)
}

實(shí)現(xiàn)renderLabel函數(shù)。節(jié)點(diǎn)label定制關(guān)鍵在這里：

export const renderLabel = (h, data, context) => {
 const {props} = context
 const renderContent = props.renderContent
 const childNodes = []
 // 節(jié)點(diǎn)label定制，由調(diào)用者傳入的renderContent實(shí)現(xiàn)
 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)
}

實(shí)現(xiàn)renderChildren函數(shù)。這里遞歸調(diào)用renderNode，實(shí)現(xiàn)了遞歸組件

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函數(shù)完成了，接下來(lái)使用render函數(shù)定義函數(shù)式組件。在tree組件里面聲明：

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

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

CSS樣式

樣式使用less預(yù)編譯。節(jié)點(diǎn)之間的線條采用了 :before 、 :after 偽元素的 border 繪制

功能擴(kuò)展

• 添加了 labelClassName 屬性，以支持對(duì)節(jié)點(diǎn)label的樣式定制

• 添加了 labelWidth 屬性，用于限制節(jié)點(diǎn)label的寬度

• 添加了 props 屬性，參考 element-ui 的 tree 組件的props屬性，以支持復(fù)雜的數(shù)據(jù)結(jié)構(gòu)

• 添加了 collapsable 屬性，以支持子節(jié)點(diǎn)的展開和折疊（展開和折疊操作需調(diào)用者實(shí)現(xiàn)）

• 剛開始采用了 flex 布局，但是要兼容IE9，后來(lái)改成了 display: table 布局

最終效果：

default

horizontal

問(wèn)題總結(jié)

可以定義一個(gè)樹的store，存儲(chǔ)每個(gè)節(jié)點(diǎn)狀態(tài)，這樣就可以在內(nèi)部維護(hù)樹節(jié)點(diǎn)的展開可收起狀態(tài)

以上是“基于Vue制作組織架構(gòu)樹組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：基于Vue制作組織架構(gòu)樹組件
瀏覽地址：http://muchs.cn/article46/jpddhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、App開發(fā)、、網(wǎng)站內(nèi)鏈、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)