Vue組織架構(gòu)樹圖組件vue-org-tree的使用解析

更新時間：2022年08月01日 14:11:45 作者：蕓靈fly

這篇文章主要介紹了Vue組織架構(gòu)樹圖組件vue-org-tree的使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue組織架構(gòu)樹圖組件vue-org-tree

說明

最近需要作出一個組織架構(gòu)圖來可視化展示一下，最后找到vue-org-tree這個組件，覺得效果還不錯~，可選節(jié)點顏色、橫向/縱向展開、打開/收起，在這記錄一下使用方法，效果圖如下：

快速開始

安裝

npm install --save-dev less less-loader
npm install --save-dev vue2-org-tree

（可能還需要安裝其他組件，報錯的話根據(jù)提示再install就行）

然后在main.js引入

import Vue2OrgTree from 'vue2-org-tree';
Vue.use(Vue2OrgTree)

使用

<template>
  <div>
    <div class="container">
      <div class="col-md-10 col-md-offset-1">
        <div class="page-header">
          <h3>基于Vue的組織架構(gòu)樹組件</h3>
        </div>
        <div class="row">
          <div class="col-md-8 col-md-offset-2">
            <form class="form-horizontal row">
              <div class="col-md-4">
                <div class="checkbox">
                  <label>
                    <input
                      type="checkbox"
                      v-model="horizontal"
                    > Horizontal
                  </label>
                </div>
              </div>
              <div class="col-md-4">
                <div class="checkbox">
                  <label>
                    <input
                      type="checkbox"
                      v-model="collapsable"
                    > Collapsable
                  </label>
                </div>
              </div>
              <div class="col-md-4">
                <div class="checkbox">
                  <label>
                    <input
                      type="checkbox"
                      v-model="expandAll"
                      @change="expandChange"
                    > Expand All
                  </label>
                </div>
              </div>
              <p><br></p>
              <p><br></p>
              <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label col-md-5">labelClassName:</label>
                  <div class="col-md-7">
                    <select
                      class="form-control"
                      v-model="labelClassName"
                    >
                      <option value="bg-white">bg-white</option>
                      <option value="bg-orange">bg-orange</option>
                      <option value="bg-gold">bg-gold</option>
                      <option value="bg-gray">bg-gray</option>
                      <option value="bg-lightpink">bg-lightpink</option>
                      <option value="bg-chocolate">bg-chocolate</option>
                      <option value="bg-tomato">bg-tomato</option>
                    </select>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <p><br></p>
        <div class="text-center">
          <vue2-org-tree name="test"
            :data="data"
            :horizontal="horizontal"
            :collapsable="collapsable"
            :label-class-name="labelClassName"
            :render-content="renderContent"
            @on-expand="onExpand"
            @on-node-click="onNodeClick"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "產(chǎn)品研發(fā)部",
            children: [
              {
                id: 5,
                label: "研發(fā)-前端"
              },
              {
                id: 6,
                label: "研發(fā)-后端"
              },
              {
                id: 9,
                label: "UI設(shè)計"
              },
              {
                id: 10,
                label: "產(chǎn)品經(jīng)理"
              }
            ]
          },
          {
            id: 3,
            label: "銷售部",
            children: [
              {
                id: 7,
                label: "銷售一部"
              },
              {
                id: 8,
                label: "銷售二部"
              }
            ]
          },
          {
            id: 4,
            label: "財務(wù)部"
          },
          {
            id: 9,
            label: "HR人事"
          }
        ]
      },
      horizontal: false,
      collapsable: true,
      expandAll: false,
      labelClassName: "bg-white"
    };
  },
  methods: {
    renderContent(h, data) {
      return data.label;
    },
    onExpand(data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    onNodeClick(e, data) {
      alert(data.label);
    },
    collapse(list) {
      var _this = this;
      list.forEach(function(child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function(item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    }
  }
};
</script>

<style type="text/css">
.org-tree-node-label {
  white-space: nowrap;
}
.bg-white {
  background-color: white;
}
.bg-orange {
  background-color: orange;
}
.bg-gold {
  background-color: gold;
}
.bg-gray {
  background-color: gray;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-chocolate {
  background-color: chocolate;
}
.bg-tomato {
  background-color: tomato;
}
</style>

API

props

prop	descripton	type	default
data		Object
props	configure props	Object	{label: 'label', children: 'children', expand: 'expand'}
labelWidth	node label width	String \| Number.	auto
collapsable	children node is collapsable	Boolean	true
renderContent	how to render node label	Function	-
labelClassName	node label class	Function \| String	-

events

on-expand
well be called when the collapse-btn clicked
on-node-click
well be called when the node-label clicked

參考html例子：https://github.com/hukaibaihu/vue-org-tree/blob/gh-pages/index.html

組件github：https://github.com/hukaibaihu/vue-org-tree

Vue組織架構(gòu)圖組件

vue-tree-chart

:deciduous_tree: Vue2樹形圖組件

logo

安裝：

npm i vue-tree-chart --save

使用：

in template:

<TreeChart :json="treeData" />

in script:

import TreeChart from "vue-tree-chart";
export default {
	components: {
    	TreeChart
	},
	data() {
		return {
			treeData: {
				...
			}
		}
	}
	...

屬性：

json

組件數(shù)據(jù)，支持字段：

- name[String] 節(jié)點名稱
- image_url[String] 節(jié)點圖片
- children[Array] 節(jié)點后代
- mate[Object] 節(jié)點配偶

示例：

{
    name: 'root',
    image_url: "https://static.refined-x.com/avat.jpg",
    children: [
      {
        name: 'children1',
        image_url: "https://static.refined-x.com/avat1.jpg"
      },
      {
        name: 'children2',
        image_url: "https://static.refined-x.com/avat2.jpg",
        mate: {
          name: 'mate',
          image_url: "https://static.refined-x.com/avat3.jpg"
        },
        children: [
          {
            name: 'grandchild',
            image_url: "https://static.refined-x.com/avat.jpg"
          },
          {
            name: 'grandchild2',
            image_url: "https://static.refined-x.com/avat1.jpg"
          },
          {
            name: 'grandchild3',
            image_url: "https://static.refined-x.com/avat2.jpg"
          }
        ]
      },
      {
        name: 'children3',
        image_url: "https://static.refined-x.com/avat.jpg"
      }
    ]
  }

事件：