快捷導(dǎo)航

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

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

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

npm

# use npm
npm install vue-tree-color

安裝loader

npm install --save-dev less less-loader

導(dǎo)入插件

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

基本使用

開(kāi)始

因?yàn)橐呀?jīng)安裝過(guò)了組件，所以可以直接使用，在vue頁(yè)面中，直接使用組件標(biāo)簽，動(dòng)態(tài)綁定data數(shù)據(jù)（data數(shù)據(jù)為遞歸數(shù)據(jù)即可）

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

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

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

在這里插入圖片描述

排列方式

上面圖片是默認(rèn)排列方式，其實(shí)還有一種水平排列方式

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

效果如下

在這里插入圖片描述

折疊展示

添加一個(gè)屬性 collapsable，并添加一個(gè)組件自帶方法

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

效果如下

在這里插入圖片描述

點(diǎn)擊節(jié)點(diǎn)

添加一個(gè)方法 on-node-click

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

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

數(shù)據(jù)動(dòng)態(tài)加載

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

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

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

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

您可能感興趣的文章: