最近做專案中給了一個需求需要實現一個類似於思維導圖的組織架構樹元件,就在網上找，發現一個大佬個人寫的一個元件，非常好用。

作者demo演示地址
1.下載

# use npm
npm i vue-okr-tree

# use yarn
yarn add vue-okr-tree

2.引入（可以在需要用到的元件引入，也可以註冊全域性引入）

import { VueOkrTree } from 'vue-okr-tree';
import 'vue-okr-tree/dist/vue-okr-tree.css'

3.使用

// 在這裡我使用的是節點自定義內容，通過 render-content 渲染節點內容。
// 1.元件引入並註冊完畢後，在template標籤引入元件。
  <vue-okr-tree 
    :data="testData" // 資料來源
    direction="horizontal" // 樹排列方式 支援 horizontal / vertical
    show-collapsable // 節點是否可被展開（預設為false）
    default-expand-all // 是否預設展開所有節點，該引數只有在 show-collapsable 為 true 時有效
    :render-content="renderContent" // 自定義渲染節點內容
    label-width="205px" // 節點的寬度，預設為自動寬度（string / number）
  />
 
// 2.export default中
  data(){
    return{ 
      testData:[] // 資料來源
   }
  }

// 3.methods函式中
  methods:{
    // 通過 render-content 渲染節點內容。
    renderContent (h, node) {
      return (
        <div class="renderTree">
          <div><span>被督導單位：{node.data.soncompanyname}</span></div>
          <div><span>被督導崗位：{node.data.sonpostname}</span></div>
          <div class="gisfamily font13">{node.data.thislinkendtime}</div>
          <div class="renderTree_color">
            <span class="renderTree_radius" style={'background:'+node.data.itemstatuscolor+''}></span> // 自定義拼接動態顏色
            <span class="renderTree_status" style={'background:'+node.data.itemstatuscolor+''}>{node.data.itemstatusname}</span> // 自定義拼接動態顏色
          </div>
          <div><span>督導單位：{node.data.companyname}</span></div>
          <div><span>督導崗位：{node.data.postname}</span></div>
        </div>
      )
    },
  }
// 4.style中設定一些預設的樣式
<style>
  .org-chart-node-label-inner{
    font-size: 12px !important; // 設定樹的預設字型
  }
  
  /* 設定樹寬度 */
  .org-chart-container{
    width: 1300px !important;
    height: 330px !important;
    display: flex !important;
    align-items: center !important;
    overflow: auto;
    scrollbar-color: #515151 rgba(0, 0, 0, 0.1);  /* 第一個方塊顏色，第二個軌道顏色(用於更改火狐瀏覽器樣式) */
    scrollbar-width:thin;
  }
</style>