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

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

本文主要介紹了如何在Vue中使用vue-tree-color組件實現(xiàn)組織架構(gòu)圖,并詳細介紹了如何實現(xiàn)數(shù)據(jù)的動態(tài)加載,在動態(tài)加載數(shù)據(jù)時,要確保數(shù)據(jù)更新是在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)

基本使用

開始

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

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

data數(shù)據(jù)放入頁面中

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

在這里插入圖片描述

排列方式

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

# 只需要加上 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é)點數(shù)據(jù)
    console.log(e)
    // data是渲染在節(jié)點上的數(shù)據(jù)
    console.log(data)
},

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

數(shù)據(jù)動態(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); // 更新數(shù)據(jù)需要vue的響應式系統(tǒng)能捕獲到
          }
    }
  }
}
</script>

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

動態(tài)數(shù)據(jù)效果圖

到此這篇關(guān)于VUE使用vue-tree-color組件實現(xiàn)組織架構(gòu)圖并可以動態(tài)更新數(shù)據(jù)的效果的文章就介紹到這了,更多相關(guān)vue 使用vue-tree-color組織架構(gòu)圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: