VUE使用vue-tree-color組件實現組織架構圖并可以動態(tài)更新數據的效果

更新時間：2024年10月29日 14:27:20 作者：凌兒~

本文主要介紹了如何在Vue中使用vue-tree-color組件實現組織架構圖,并詳細介紹了如何實現數據的動態(tài)加載,在動態(tài)加載數據時,要確保數據更新是在Vue的響應式系統(tǒng)能捕獲到的情況下進行的

npm

# use npm
npm install vue-tree-color

安裝loader

npm install --save-dev less less-loader

導入插件

import Vue from 'vue'
import Vue2OrgTree from 'vue-tree-color'
Vue.use(Vue2OrgTree)

基本使用

開始

因為已經安裝過了組件，所以可以直接使用，在vue頁面中，直接使用組件標簽，動態(tài)綁定data數據（data數據為遞歸數據即可）

<vue2-org-tree :data="data"/>
...
 datas:{
        id:0,
        label:'一級',
        children:[
          {
            id:11,
            label:'二級1'
          }
        ]
      }

data數據放入頁面中

其中，data數據中，id 每個元素不同的ID ，label為name， children為自己的子集數據

在這里插入圖片描述

排列方式

上面圖片是默認排列方式，其實還有一種水平排列方式

# 只需要加上 horizontal 即可
<vue2-org-tree :data="datas" :horizontal="true" />

效果如下

在這里插入圖片描述

折疊展示

添加一個屬性 collapsable，并添加一個組件自帶方法

 <vue2-org-tree :data="data" :horizontal="true" collapsable @on-expand="onExpand" />
...
methods: {
    collapse(list) {
        var _this = this
        list.forEach(function(child) {
            if (child.expand) {
                child.expand = false
            }
            child.children && _this.collapse(child.children)
        })
    },
    onExpand(e, data) {
        if ('expand' in data) {
            data.expand = !data.expand
            if (!data.expand && data.children) {
                this.collapse(data.children)
            }
        } else {
            this.$set(data, 'expand', true)
        }
    }
}

效果如下

在這里插入圖片描述

點擊節(jié)點

添加一個方法 on-node-click

<vue2-org-tree :data="data" :horizontal="true" collapsable @on-expand="onExpand" @on-node-click="onNodeHandle" />
...
onNodeHandle(e, data) {
    // e是節(jié)點數據
    console.log(e)
    // data是渲染在節(jié)點上的數據
    console.log(data)
},

已上為使用vue-tree-color組件實現組織架構圖，接下來實現數據動態(tài)加載

數據動態(tài)加載

<template>
  <div >
    <vue2-org-tree  :data="datas"   @on-node-click="onNodeHandle" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      datas:{
        id:0,
        label:'一級',
        children:[
          {
            id:11,
            label:'二級1'
          }
        ]
      }
    }
  },
  methods: {
    onNodeHandle(e, data) {
        let newChild = [
          {
              id: 111,
              label: '三級1'
          },
          {
              id: 112,
              label: '三級2'
          },{
              id: 113,
              label: '三級3'
          }
        ]
          let targetNode = this.datas.children.find(node => node.id === 11);
          if (targetNode) {
              // 使用$set方法添加子節(jié)點
              this.$set(targetNode, 'children', newChild); // 更新數據需要vue的響應式系統(tǒng)能捕獲到
          }
    }
  }
}
</script>

其中實現動態(tài)數據的加載關鍵在于確保數據更新是在 Vue 的響應式系統(tǒng)能夠捕獲到的情況下進行的。例如，如果數據是通過異步請求獲取的，要確保在請求成功后，正確地更新treeData。如果在更新數據時，沒有遵循 Vue 的響應式規(guī)則，比如直接修改數組的索引而不是使用 Vue 提供的數組變異方法（如push、splice等）或者ref、reactive的更新方法，組件可能無法正確更新。例如，不要這樣更新數組this.treeData[0]=newValue（這不會觸發(fā)響應式更新），而應該使用this.treeData.splice(0, 1, newValue)或者如果treeData是ref定義的，treeData.value.push(newValue)